{"componentChunkName":"component---src-templates-post-js","path":"/blog/novus","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"📦 实现一个简单朴素的 react 数据管理层 NOVUS","tips":[],"categories":["code"],"datetime":"2020-02-07 22:50:20","noFooter":false,"description":"我喜欢的全局数据管理层只需要一个数据层，而不是各种范式、同步异步的需求，更不是没办法代码提示的各种 Action Type，尤其是没有 typescript 支持，不喜欢各种类型写好多次，不喜欢各种数据层概念，只想要实现一个简单朴素的数据管理工具","plainTextDescription":"我喜欢的全局数据管理层只需要一个数据层，而不是各种范式、同步异步的需求，更不是没办法代码提示的各种 Action Type，尤其是没有 typescript 支持，不喜欢各种类型写好多次，不喜欢各种数据层概念，只想要实现一个简单朴素的数据管理工具\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='142'%3e%3cpath%20d='M0%2071v71h401V0H0v71m302-50h-12c-9%200-11%200-11%202%200%201%208%202%2010%200h1l12%201%2014%201c2%200%202%200%202-2s-1-2-8-2h-8M7%2067l32%201%2031-1-31-1-32%201m0%2025'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.811088295687885,"src":"/static/fca957b9be8350ac79ddfe25ec32c595/0229f/banner.png","srcSet":"/static/fca957b9be8350ac79ddfe25ec32c595/82675/banner.png 500w,\n/static/fca957b9be8350ac79ddfe25ec32c595/fef60/banner.png 1000w,\n/static/fca957b9be8350ac79ddfe25ec32c595/0229f/banner.png 1369w","srcWebp":"/static/fca957b9be8350ac79ddfe25ec32c595/adc0a/banner.webp","srcSetWebp":"/static/fca957b9be8350ac79ddfe25ec32c595/7fe04/banner.webp 500w,\n/static/fca957b9be8350ac79ddfe25ec32c595/d619e/banner.webp 1000w,\n/static/fca957b9be8350ac79ddfe25ec32c595/adc0a/banner.webp 1369w","sizes":"(max-width: 1369px) 100vw, 1369px"}}},"bannerCredit":null,"slug":"/blog/novus","tags":["整理","思考","功能","NOVUS","状态管理"]},"headings":[{"value":"一、为什么","depth":2},{"value":"二、Redux 非常优秀，但是...","depth":2},{"value":"三、目标和取舍","depth":2},{"value":"四、实现","depth":2},{"value":"五、代码和实例","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"novus\",\n  \"title\": \"📦 实现一个简单朴素的 react 数据管理层 NOVUS\",\n  \"date\": \"2020-02-07 22:50:20\",\n  \"author\": \"Ubug\",\n  \"description\": \"我喜欢的全局数据管理层只需要一个数据层，而不是各种范式、同步异步的需求，更不是没办法代码提示的各种 Action Type，尤其是没有 typescript 支持，不喜欢各种类型写好多次，不喜欢各种数据层概念，只想要实现一个简单朴素的数据管理工具\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"整理\", \"思考\", \"功能\", \"NOVUS\", \"状态管理\"],\n  \"banner\": \"../novus2/banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst CodeWithPreview = makeShortcode(\"CodeWithPreview\");\nconst SourceCodeLink = makeShortcode(\"SourceCodeLink\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"PS: \\u4ED3\\u5E93\\u548C\\u4EE3\\u7801\\u5728\\u6700\\u4E0B\\u9762\\uFF1B\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"PS\", mdx(\"sup\", null, \"2\"), \": \\u540E\\u7EED\\u51FA\\u73B0\\u4E86\\u4E00\\u4E9B\\u95EE\\u9898\\u548C\\u75DB\\u70B9\\uFF0C\\u505A\\u4E86\\u5F88\\u591A\\u7684\\u6539\\u8FDB\\uFF1A \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/novus-2\"\n  }, \"\\uD83D\\uDCE6 \\u6539\\u8FDB\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\"), \"\\uFF0C\\u5305\\u62EC\\u540C\\u6B65\\u89E6\\u53D1\\u3001\\u521D\\u59CB\\u5316\\u3001\\u81EA\\u52A8\\u4F9D\\u8D56\\u6536\\u96C6\\u3001\\u201C\\u5598\\u606F\\u673A\\u5236\\u201D\\u3001Novus \\u7248 Fiber \\u548C\\u6D4B\\u8BD5\\uFF0C\\u672C\\u7BC7\\u91CD\\u70B9\\u8BF4\\u9700\\u6C42\\u3001\\u57FA\\u7840\\u529F\\u80FD\\u548C\\u521D\\u6B65\\u5B9E\\u73B0\\u3002\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"PS\", mdx(\"sup\", null, \"3\"), \": \\u524D\\u7AEF\\u9879\\u76EE\\u4E2D\\u7684\\u6570\\u636E\\u5C42\\u88AB\\u9020\\u8F6E\\u5B50\\u65E0\\u6570\\uFF0C\\u6709\\u5F88\\u591A\\u4F18\\u79C0\\u7684\\u5E93\\uFF0C\\u5927\\u5382\\u66F4\\u4E0D\\u7528\\u8BF4\\u5185\\u90E8\\u6210\\u719F\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u3002\\u8FD9\\u53EA\\u662F\\u6211\\u5728\\u9879\\u76EE\\u4E2D\\u5B9E\\u8DF5\\u7684\\u4E00\\u4E2A\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u4EC5\\u4F9B\\u53C2\\u8003\\u3002\"))), mdx(\"div\", {\n    \"style\": {\n      \"display\": \"flex\",\n      \"justifyContent\": \"center\"\n    }\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"/chart-b85fa209b241651240201c1e1cdbcfed.svg\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"novus \\u5355\\u5411\\u6570\\u636E\\u6D41\"), \"\\n  \")), mdx(\"h2\", null, \"\\u4E00\\u3001\\u4E3A\\u4EC0\\u4E48\"), mdx(\"p\", null, \"\\u5728\\u73B0\\u4EE3\\u524D\\u7AEF\\u5F00\\u53D1\\u4E2D\\uFF0C\\u7EC4\\u4EF6\\u5316\\u3001\\u6A21\\u5757\\u5316\\u7684\\u5F15\\u5165\\uFF0C\\u72B6\\u6001\\u4E0E\\u754C\\u9762\\u7684\\u5206\\u79BB\\uFF0C\\u5BFC\\u81F4\\u72B6\\u6001\\u6570\\u636E\\u7684\\u5171\\u4EAB\\u548C\\u6D41\\u8F6C\\u90E8\\u5206\\u53D8\\u5F97\\u5F88\\u91CD\\u8981\\uFF0C\\u7A0D\\u5FAE\\u590D\\u6742\\u70B9\\u7684\\u9879\\u76EE\\u90FD\\u9700\\u8981\\u62BD\\u8C61\\u51FA\\u4E00\\u4E2A\\u6570\\u636E\\u5C42\\u6765\\u8D1F\\u8D23\\u6570\\u636E\\u7684\\u7BA1\\u7406\\u3001\\u53D8\\u66F4\\u548C\\u5206\\u53D1\\u3002\"), mdx(\"p\", null, \"\\u6211\\u5728 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/talks\"\n  }, \"talks\"), \" \\u680F\\u76EE\\u4E2D\\u4E5F\\u7B80\\u5355\\u8BF4\\u8FC7\\uFF1A \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/talks/#%F0%9F%9B%85%20%E6%95%B0%E6%8D%AE%E5%B1%82\"\n  }, \"\\u6570\\u636E\\u5C42\")), mdx(\"p\", null, \"\\u5C24\\u5176\\u662F React\\u3001Vue \\u8FD9\\u7C7B\\u7EC4\\u4EF6\\u5316\\u5F00\\u53D1\\u6846\\u67B6\\uFF0C\\u6570\\u636E\\u9A71\\u52A8\\u7684\\u601D\\u60F3\\u662F\\u57FA\\u56E0\\u91CC\\u5E26\\u7684\\uFF0C\\u4F46\\u662F\\u81EA\\u5E26\\u7684\\u90FD\\u662F\\u7EC4\\u4EF6\\u5185\\u90E8\\u548C\\u4E4B\\u95F4\\u7684\\u72B6\\u6001\\u6D41\\u8F6C\\uFF0C\\u5982\\u679C\\u9700\\u8981\\u5168\\u5C40\\u7684\\u72B6\\u6001\\u3001\\u8DE8\\u7EC4\\u4EF6\\u7684\\u53D8\\u66F4\\u3001\\u591A\\u5C42\\u7EA7\\u7684\\u72B6\\u6001\\u5171\\u4EAB\\uFF0C\\u8FD8\\u662F\\u9700\\u8981\\u989D\\u5916\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\uFF0CReact \\u5E76\\u6CA1\\u6709\\u5728\\u8FD9\\u4E2A\\u5730\\u65B9\\u63D0\\u4F9B\\u5F00\\u7BB1\\u5373\\u7528\\u7684\\u5185\\u7F6E\\u65B9\\u6848\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u63A5\\u89E6\\u7684\\u6982\\u5FF5\\u6BD4\\u8F83\\u591A\\u7684\\u6709 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://redux.js.org/\"\n  }, \"Redux\"), \"\\uFF0C\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://facebook.github.io/flux/\"\n  }, \"Flux\"), \" \\u7684\\u6982\\u5FF5\\u5728\\u524D\\u7AEF\\u5F00\\u53D1\\u7684\\u6F14\\u8FDB\\u4E2D\\u5360\\u636E\\u7740\\u5F88\\u91CD\\u8981\\u7684\\u4E00\\u4E2A\\u4F4D\\u7F6E\\uFF0C\\u53E6\\u5916\\u8FD8\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"MobX\"), \"\\uFF0C\\u7528\\u4E0D\\u540C\\u7684\\u601D\\u8DEF\\u6765\\u5904\\u7406\\u6570\\u636E\\u548C\\u53D8\\u66F4\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u7C7B\\u5168\\u5C40\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u7406\\u5FF5\\u80FD\\u591F\\u5C06\\u5F88\\u590D\\u6742\\u7684\\u5E94\\u7528\\u67B6\\u6784\\u62C6\\u5206\\uFF0C\\u5728\\u524D\\u9762 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/workpad-part-2\"\n  }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u4E8C\\uFF08\\u6838\\u5FC3\\u67B6\\u6784\\uFF09\"), \" \\u6587\\u7AE0\\u4E2D\\u4E5F\\u8BF4\\u4E86\\u8FD9\\u4E2A\\u4E8B\\u60C5\\uFF0C\\u76F8\\u6BD4\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u5206\\u6563\\u7684\\u6982\\u5FF5\\uFF0C\\u5C06\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\u62C6\\u5206\\u4E3A\\u5168\\u5C40\\u7684\\uFF1A\\u89E6\\u53D1\\u52A8\\u4F5C\\u3001\\u4FEE\\u6539\\u6570\\u636E\\u3001\\u53D8\\u66F4\\u901A\\u77E5\\u3002\\u8FD9\\u6837\\u7684\\u72EC\\u7ACB\\u7684\\u6570\\u636E\\u7BA1\\u7406\\u5C42\\u63A7\\u5236\\u7684\\u5355\\u5411\\u6570\\u636E\\u6D41\\u8F6C\\uFF0C\\u4FDD\\u8BC1\\u6BCF\\u4E2A\\u8282\\u70B9\\u90FD\\u662F\\u63A5\\u53D7\\u6570\\u636E\\u66F4\\u65B0\\uFF0C\\u800C\\u4E0D\\u662F\\u4E00\\u7EA7\\u4E00\\u7EA7\\u4F20\\u9012\\uFF0C\\u6216\\u8005\\u56DE\\u8C03\\u51FD\\u6570\\u7B49\\uFF0C\\u8BA9\\u52A8\\u4F5C\\u3001\\u6570\\u636E\\u548C\\u754C\\u9762\\u62C6\\u5206\\uFF0C\\u65B9\\u4FBF\\u66F4\\u5927\\u578B\\u7684\\u67B6\\u6784\\u6269\\u5C55\\uFF0C\\u800C\\u4E0D\\u7528\\u64CD\\u5FC3\\u6570\\u636E\\u4ECE\\u54EA\\u6765\\u3001\\u600E\\u4E48\\u53D8\\u66F4\\u3001\\u600E\\u4E48\\u91CD\\u7ED8\\u7EC4\\u4EF6\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c77b157f4707d4711f7368e8590ee1e9/8b6a1/redux-architecture.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"29.72972972972973%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAABi0lEQVQY02N4uvk0w4MNJ5guz17HUDD9MMP6s/+ZJmx5x3hgYgzD/4frmf4/WMr4cN0Fhhv7TjIzAMGRI0fjT5w4MWvfvv2SIP72U6+Y582aw/D/3jLG/082MDKQCg4e2huxd9+uGSfPHhbGqmDXxKWOuyYtO7G9fbpLzpQ9JpNWXT5XP/+8/76uQK1723qP39/W4re1Z3nsnknLDs2vn2jS27yxflLb5o19jYucO5ecrutbeX1rb89kvftbOlbf3dLdwXBg2mq1HROW1O7pma2ZNe+b8MSVH2Jq5n9XuLciVfzu1t6qB9tb9Xf0rzbZOWFxyarWWZKLZx4OWjX3ZEES42bepnkvjaZtepi+YP4K0QdbO5LvbO72R3Ht3B3tJqtPT146f3eHJw4fM4HJVAaWFSdnLVl+dGIpVBwRdv+OPWRsLa3gALEnrG7XXbB32oQp67vtQfz+pjSOX2enMh6ZsY2xK6eK1cnBhoWBgZexZ16n6MJ9U+vn7Z6SCFIXHBvAMqEskhXoZSYAl5e3zvqcLJoAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"redux 的数据流转\",\n    \"title\": \"redux 的数据流转\",\n    \"src\": \"/static/c77b157f4707d4711f7368e8590ee1e9/0dc48/redux-architecture.png\",\n    \"srcSet\": [\"/static/c77b157f4707d4711f7368e8590ee1e9/2c191/redux-architecture.png 259w\", \"/static/c77b157f4707d4711f7368e8590ee1e9/86b01/redux-architecture.png 518w\", \"/static/c77b157f4707d4711f7368e8590ee1e9/0dc48/redux-architecture.png 1035w\", \"/static/c77b157f4707d4711f7368e8590ee1e9/8b6a1/redux-architecture.png 1319w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"redux \\u7684\\u6570\\u636E\\u6D41\\u8F6C\"), \"\\n  \")), mdx(\"p\", null, \"\\u8FD9\\u79CD\\u6570\\u636E\\u7684\\u7BA1\\u7406\\u6A21\\u5F0F\\u5728\\u5927\\u578B\\u9879\\u76EE\\u4E2D\\u975E\\u5E38\\u6709\\u6548\\uFF0C\\u53CD\\u6B63\\u6211\\u76EE\\u524D\\u5728\\u8F83\\u5927\\u578B\\u7684\\u9879\\u76EE\\u4E2D\\u90FD\\u9700\\u8981\\u4E00\\u4E2A\\u6570\\u636E\\u5C42\\u7684\\u4E1C\\u897F\\u6765\\u7BA1\\u7406\\u6570\\u636E\\u7684\\u9A71\\u52A8\\u3001\\u53D8\\u66F4\\u548C\\u5206\\u53D1\\u3002\"), mdx(\"p\", null, \"\\u7136\\u540E\\u7D22\\u6027\\u4E00\\u60F3\\uFF0C\\u4E0D\\u5982\\u6211\\u4E5F\\u6765\\u9020\\u4E2A\\u8F6E\\u5B50\\uFF0C\\u4E00\\u65B9\\u9762\\u6EE1\\u8DB3\\u8FD9\\u4E2A\\u9879\\u76EE\\u6700\\u540E\\u4E00\\u5757\\u4F18\\u96C5\\u7684\\u62FC\\u56FE\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u8FD9\\u5757\\u786E\\u5B9E\\u6709\\u4E9B\\u60F3\\u6CD5\\uFF0C\\u4E5F\\u662F\\u65F6\\u5019\\u5C06\\u8FD9\\u4E9B\\u60F3\\u6CD5\\u53D8\\u6210\\u4EA7\\u51FA\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001Redux \\u975E\\u5E38\\u4F18\\u79C0\\uFF0C\\u4F46\\u662F...\"), mdx(\"p\", null, \"redux \\u5728\\u524D\\u7AEF\\u5F00\\u53D1\\u4E2D\\u975E\\u5E38\\u6709\\u6548\\uFF0C\\u800C\\u4E14 react\\u3001redux\\u3001react-redux \\u5168\\u5BB6\\u6876\\u4E5F\\u5F88\\u597D\\u7528\\uFF0C\\u4E00\\u822C\\u7684\\u516C\\u53F8\\u90FD\\u4F1A\\u4F7F\\u7528\\u8FD9\\u4E2A\\u5DE5\\u5177\\u6765\\u7BA1\\u7406\\u524D\\u7AEF\\u7684\\u6570\\u636E\\u4E2D\\u5FC3\\u3002\\u8FD9\\u91CC\\u4E5F\\u8F6E\\u4E0D\\u5230\\u6211\\u6765\\u5BF9\\u8FD9\\u4E2A\\u4F18\\u79C0\\u7684\\u5DE5\\u5177\\u8BC4\\u5934\\u54C1\\u8DB3\\u7684\\uFF0C\\u771F\\u7684\\u975E\\u5E38\\u4F18\\u79C0\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u4F18\\u79C0\\u7684\\u610F\\u601D\\u5E76\\u4E0D\\u662F\\u9002\\u5408\\u6BCF\\u4E00\\u4E2A\\u4EBA\\u548C\\u6BCF\\u4E00\\u4E2A\\u9879\\u76EE\\uFF0C\\u5F88\\u591A\\u5410\\u69FD\\u548C\\u8BA8\\u8BBA\\u4E5F\\u5145\\u65A5\\u5404\\u5927\\u793E\\u533A\\uFF0C\\u6BD4\\u5982\\u6BD4\\u8F83\\u591A\\u7684\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6982\\u5FF5\\u592A\\u591A\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u52A0\\u4E0A\\u526F\\u4F5C\\u7528\\u548C\\u80F6\\u6C34\\u4E2D\\u95F4\\u4EF6\\u5904\\u7406\\u5C31\\u4F1A\\u6709 store\\u3001states\\u3001action\\u3001reducer\\u3001dispatch\\u3001payload\\u3001immutable\\u3001take\\u3001put\\u3001call\\u3001connect\\u3001mapStateToProps\\u3001mapDispatchToProps \\u8FD9\\u4E9B\\u6982\\u5FF5\\u95E8\\u69DB\\u4F1A\\u6709\\u529D\\u9000\\u6548\\u5E94\\uFF0C\\u60F3\\u5165\\u95E8\\u5FC5\\u987B\\u82B1\\u65F6\\u95F4\\u5B66\\u4E60\\u548C\\u5B9E\\u8DF5\\uFF0C\\u867D\\u7136\\u5728\\u6570\\u636E\\u7BA1\\u7406\\u4E2D\\u53EA\\u8981\\u6DF1\\u5165\\u62BD\\u8C61\\uFF0C\\u8FD9\\u4E9B\\u90FD\\u4F1A\\u6D89\\u53CA\\uFF0C\\u4F46\\u662F\\u6BCF\\u4E2A\\u9879\\u76EE\\u6216\\u8005\\u65B0\\u4EBA\\u90FD\\u4F1A\\u6709\\u5F88\\u591A\\u7684\\u5B66\\u4E60\\u548C\\u9002\\u5E94\\u6210\\u672C\\u3002\")), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6A21\\u5F0F\\u4EE3\\u7801\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6D01\\u7656\\u7684\\u5F00\\u53D1\\u5F62\\u5F0F\\uFF0C\\u6BCF\\u4E2A\\u72B6\\u6001\\u7684\\u7BA1\\u7406\\u90FD\\u8981\\u62C6\\u5206\\u5230\\u4E0D\\u540C\\u7684\\u6587\\u4EF6\\u6216\\u8005\\u903B\\u8F91\\u4E2D\\uFF0C\\u51FD\\u6570\\u5F0F\\u3001\\u4E0D\\u53EF\\u53D8\\u6027\\u7684\\u4EE3\\u4EF7\\u662F\\u7E41\\u7410\\u7684\\u6A21\\u5F0F\\u4EE3\\u7801\\uFF0C\\u72B6\\u6001\\u5C0F\\u6539\\u4E00\\u4E0B\\u90FD\\u8981\\u6539\\u597D\\u51E0\\u4E2A\\u6587\\u4EF6\\uFF0C\\u4E5F\\u56E0\\u6B64\\u51E0\\u4E4E\\u5927\\u578B\\u9879\\u76EE\\u90FD\\u4F1A\\u5BF9\\u8FD9\\u5757\\u8FDB\\u884C\\u5C01\\u88C5\\uFF0C\\u56E0\\u4E3A\\u786E\\u5B9E\\u7EF4\\u62A4\\u8D77\\u6765\\u4F1A\\u5F88\\u56F0\\u96BE\\u3002\\u597D\\u5904\\u662F\\u903B\\u8F91\\u6E05\\u6670\\uFF0C\\u50CF\\u662F\\u673A\\u623F\\u7684\\u6570\\u636E\\u7EBF\\u6574\\u7406\\uFF0C\\u7ED5\\u4E86\\u5F88\\u591A\\u5708\\u4F46\\u662F\\u770B\\u8D77\\u6765\\u5F88\\u5E72\\u51C0\\u3002\")), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u903B\\u8F91\\u62C6\\u5206\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7F16\\u7A0B\\u5F88\\u591A\\u4EBA\\u66F4\\u559C\\u6B22\\u7684\\u662F\\u76F8\\u4F3C\\u7684\\u903B\\u8F91\\u4F1A\\u653E\\u5230\\u4E00\\u8D77\\u805A\\u5408\\uFF0C\\u800C\\u4E0D\\u662F\\u6309\\u7167\\u6D41\\u7A0B\\u6216\\u8005\\u529F\\u80FD\\u62C6\\u5206\\uFF0C\\u6BD4\\u5982\\u5B66\\u751F\\u4FE1\\u606F\\u76F4\\u89C9\\u5E94\\u8BE5\\u653E\\u5230\\u4E00\\u4E2A\\u62BD\\u8C61\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u67E5\\u8BE2\\u548C\\u66F4\\u6539\\u5206\\u5F00\\u3002\\u903B\\u8F91\\u4E0A\\u7684\\u62BD\\u8C61\\u6BCF\\u4E2A\\u56E2\\u961F\\u504F\\u597D\\u4E0D\\u540C\\uFF0C\\u8FD9\\u91CC\\u5E94\\u8BE5\\u6709\\u4E0D\\u540C\\u7684\\u5B9E\\u8DF5\\u3002\")), mdx(\"p\", null, \"\\u5F53\\u7136\\u9700\\u6C42\\u7684\\u53D6\\u820D\\u662F\\u4E00\\u95E8\\u827A\\u672F\\uFF0C\\u4E0D\\u53EF\\u80FD\\u6709\\u4E00\\u4E2A\\u7248\\u672C\\u80FD\\u6EE1\\u8DB3\\u6BCF\\u4E00\\u4E2A\\u9879\\u76EE\\u9700\\u6C42\\uFF0C\\u7532\\u4E4B\\u871C\\u7CD6\\uFF0C\\u4E59\\u4E4B\\u7812\\u971C\\u4E5F\\u662F\\u5F88\\u81EA\\u7136\\u7684\\u4E8B\\u60C5\\u3002\\u6BD4\\u5982\\u4E0A\\u9762\\u7684\\u4E0D\\u65B9\\u4FBF\\u7684\\u8FD9\\u79CD\\u8303\\u5F0F\\uFF0C\\u5BF9\\u4E8E\\u8C03\\u8BD5\\u3001\\u5BF9\\u4E8E\\u6570\\u636E\\u7684\\u540C\\u6B65\\u548C\\u7BA1\\u7406\\u3001\\u5BF9\\u4E8E\\u670D\\u52A1\\u7AEF\\u6E32\\u67D3\\u3001\\u5BF9\\u4E8E\\u6D4B\\u8BD5\\u3001\\u5BF9\\u4E8E\\u9879\\u76EE\\u6570\\u636E\\u521D\\u59CB\\u5316\\u7B49\\u5374\\u662F\\u76F8\\u5BF9\\u4F18\\u96C5\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"p\", null, \"Mobx \\u4F7F\\u7528\\u88C5\\u9970\\u5668\\u7684\\u8BED\\u6CD5\\u5B9E\\u73B0\\u4E86\\u66F4\\u52A0\\u6E05\\u723D\\u7684\\u529F\\u80FD\\uFF0C\\u4E5F\\u662F\\u5F88\\u591A\\u4EBA\\u63A8\\u5D07\\u7684\\u4E00\\u4E2A\\u65B9\\u6848\\uFF0C\\u6211\\u4E5F\\u5F88\\u611F\\u5174\\u8DA3\\uFF0C\\u4E0D\\u8FC7\\u6211\\u53EF\\u80FD\\u5BF9\\u88C5\\u9970\\u5668\\u4E0D\\u592A\\u611F\\u5192\\uFF0C\\u800C\\u4E14\\u4E5F\\u6CA1\\u548B\\u7528\\u8FC7\\u3002\"), mdx(\"p\", null, \"\\u5F53\\u7136 redux \\u6216\\u8005 mobx \\u4E5F\\u5E76\\u6CA1\\u6709\\u4E00\\u4E2A\\u5B98\\u65B9\\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0C\\u66F4\\u591A\\u7684\\u662F\\u4E00\\u79CD\\u7406\\u5FF5\\uFF0C\\u6BCF\\u4E2A\\u4EBA\\u90FD\\u53EF\\u4EE5\\u6839\\u636E\\u8FD9\\u4E2A\\u7406\\u5FF5\\u5B9E\\u73B0\\u81EA\\u5DF1\\u7684\\u5DE5\\u5177\\uFF0C\\u5F53\\u7136\\u4E5F\\u5305\\u62EC\\u6211~~\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u6280\\u672F\\u53D1\\u5C55\\u5230\\u73B0\\u5728\\u66F4\\u662F\\u767E\\u82B1\\u9F50\\u653E\\uFF0C\\u5F88\\u65E9\\u4E4B\\u524D\\u8FD9\\u4E9B\\u8BA8\\u8BBA\\u5C31\\u6709\\u5F88\\u591A\\uFF1A\\n\\u963F\\u91CC\\u65E9\\u671F\\u7684\\u8BA8\\u8BBA\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/sorrycc/blog/issues/5\"\n  }, \"MobX \\u548C Redux \\u7684\\u6BD4\\u8F83\"), \"\\n\\u5BF9 antd \\u6846\\u67B6\\u91CC\\u7684\\u5410\\u69FD\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/ant-design/ant-design-pro/issues/1516\"\n  }, \"\\u5FCD\\u4E0D\\u4F4F\\u5410\\u69FD\\u4E00\\u4E0BFlux\\u548CRedux\"))), mdx(\"h2\", null, \"\\u4E09\\u3001\\u76EE\\u6807\\u548C\\u53D6\\u820D\"), mdx(\"p\", null, \"\\u5F53\\u65F6\\u90A3\\u4E2A\\u9879\\u76EE\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\u76F4\\u63A5\\u7528\\u4E86\\u5C01\\u88C5\\u6BD4\\u8F83\\u597D\\u7684 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://dvajs.com/guide/\"\n  }, \"DvaJS\"), \" \\u6765\\u505A\\u5F00\\u53D1\\uFF0C\\u5F88\\u591A\\u65B9\\u9762\\u5DF2\\u7ECF\\u6539\\u5584\\u4E86\\u5F00\\u53D1\\u4F53\\u9A8C\\uFF0C\\u53EF\\u80FD\\u81EA\\u5DF1\\u7528\\u7684\\u662F\\u6BD4\\u8F83\\u65E9\\u671F\\u7684\\u7248\\u672C\\uFF0C\\u6CA1\\u6709 TS \\u652F\\u6301\\uFF0C\\u4EC5\\u8003\\u8651 DvaJS \\u6709\\u4E00\\u4E9B\\u4E0D\\u987A\\u624B\\u7684\\u5730\\u65B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"react-router\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fetch\"), \" \\u7684\\u5185\\u7F6E\\u5E76\\u4E0D\\u9700\\u8981\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"redux\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"redux-saga\"), \" \\u5F88\\u591A\\u6982\\u5FF5\\u7279\\u6027\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"put\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"call\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"payload\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"action\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dispatch\"), \" \\u7B49\\u903B\\u8F91\\u4E00\\u4E2A\\u6CA1\\u5C11\\uFF0C\\u800C\\u4E14\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"action type\"), \" \\u5B57\\u7B26\\u4E32\\u6216\\u8005\\u5E38\\u91CF\\u7C7B\\u578B\\uFF0C\\u6CA1\\u529E\\u6CD5\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"payload\"), \" \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u6CA1\\u529E\\u6CD5\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7EE7\\u627F\\u81EA \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"redux-saga\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Generator\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Iterator\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"effects\"), \"\\uFF0C\\u7528\\u5230 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yield *\"), \" \\u5F02\\u6B65\\u5904\\u7406\\u65B9\\u5F0F\\u3002\\u4E0D\\u4E60\\u60EF\\u3001\\u4E0D\\u559C\\u6B22\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8FD8\\u60F3\\u8981\\u4E00\\u6B21\\u6570\\u636E\\u7ED3\\u6784\\u5B9A\\u4E49\\u5173\\u8054\\u7684\\u5730\\u65B9\\u90FD\\u80FD\\u7ACB\\u523B\\u53CD\\u6620\\u51FA\\u6765\\u800C\\u4E0D\\u662F\\u8FD0\\u884C\\u65F6\\u8FDE\\u63A5\\u3002\")), mdx(\"p\", null, \"\\u56E0\\u4E3A\\u8FD9\\u4E9B\\u539F\\u56E0\\uFF0C\\u5728\\u540E\\u671F\\u5168\\u9762\\u8F6C\\u5411 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TypeScript\"), \" \\u65F6\\uFF0C\\u4E00\\u76F4\\u60F3\\u628A\\u8FD9\\u5757\\u66FF\\u6362\\u6389\\u3002\"), mdx(\"p\", null, \"\\u6570\\u636E\\u5C42\\u7684\\u9700\\u6C42\\u4E00\\u822C\\u4E5F\\u5F88\\u7B80\\u5355\\uFF0C\\u8FD8\\u662F\\u7C7B\\u4F3C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dva\"), \" \\u96C6\\u4E2D\\u7EC4\\u7EC7\\u6570\\u636E\\u7684\\u65B9\\u5F0F\\uFF0C\\u4F46\\u662F\\u4E0D\\u4F7F\\u7528 redux \\u5B57\\u7B26\\u4E32\\u6A21\\u677F\\u7684\\u5F62\\u5F0F\\u3002\\u5C31\\u662F\\u80FD\\u50A8\\u5B58\\u3001\\u80FD\\u6539\\u53D8\\u3001\\u80FD\\u54CD\\u5E94\\u57FA\\u672C\\u4E0A\\u5C31\\u53EF\\u4EE5\\u4E86\\uFF0C\\u751A\\u81F3\\u53EF\\u4EE5\\u7B80\\u5355\\u7406\\u89E3\\u4E3A\\u4E00\\u4E2A\\u53D1\\u5E03\\u8BA2\\u9605\\u7CFB\\u7EDF\\u3002\\u6700\\u57FA\\u672C\\u7684\\u9700\\u6C42\\u6709\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Model\"), \" \\u6570\\u636E\\u6E90 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"state\"), \" \\u6309\\u7167\\u903B\\u8F91\\u96C6\\u4E2D\\u6570\\u636E\\uFF0C\\u80FD\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ts type\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E0D\\u8FFD\\u6C42\\u7EDD\\u5BF9\\u5E72\\u51C0\\u7684\\u65B9\\u6CD5\\u6539\\u53D8 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"state\"), \"\\uFF0C\\u4F46\\u662F\\u63D0\\u4F9B\\u65B9\\u4FBF\\u7684\\u4E60\\u60EF\\u7EA6\\u5B9A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E0D\\u9700\\u8981 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"devtool\"), \" \\u7BA1\\u7406\\u5386\\u53F2\\uFF0C\\u6CA1\\u6709\\u65F6\\u95F4\\u6F2B\\u6E38\\u7684\\u9700\\u6C42\\uFF0C\\u4E5F\\u4E0D\\u523B\\u610F\\u5F3A\\u8C03\\u4FEE\\u6539\\u72B6\\u6001\\u903B\\u8F91\\u7684\\u5E72\\u51C0\\u3001\\u7B80\\u5355\\uFF0C\\u6240\\u4EE5\\u4E0D\\u7279\\u610F\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"reducer\"), \" \\u6982\\u5FF5\\uFF0C\\u907F\\u514D\\u8BED\\u6CD5\\u5570\\u55E6\\uFF08\\u4E0D\\u5F3A\\u8C03\\u534F\\u4F5C+\\u91CD\\u653E\\u7B49\\u573A\\u666F\\uFF09\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E0D\\u7279\\u610F\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"reducer\"), \"\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u53EF\\u4EE5\\u5C01\\u88C5 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"setState\"), \" \\u4E3A\\u7EAF\\u51FD\\u6570\\u7684\\u5904\\u7406\\u6765\\u5B9E\\u73B0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"reducer\"), \" \\u76F8\\u4F3C\\u7684\\u529F\\u80FD\\uFF0C\\u8FD9\\u91CC\\u56E0\\u4E3A\\u5BF9\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\u4E0D\\u523B\\u610F\\u5F3A\\u8C03\\uFF0C\\u6240\\u4EE5\\u4E0D\\u9884\\u8BBE\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E0D\\u7279\\u610F\\u5F3A\\u8C03\\u526F\\u4F5C\\u7528\\uFF0C\\u800C\\u5F3A\\u8C03 \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u72B6\\u6001\\u672C\\u8EAB\"), \" \\u548C \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4FEE\\u6539\\u72B6\\u6001\\u7684\\u884C\\u4E3A\"), \"\\uFF0C\\u7EAF\\u51FD\\u6570\\u4F1A\\u66F4\\u597D\\uFF0C\\u4F46\\u662F\\u6211\\u5E0C\\u671B\\u8FD9\\u662F\\u53EF\\u9009\\u7684\\uFF0C\\u800C\\u4E0D\\u662F\\u7528\\u5F88\\u5947\\u602A\\u7684\\u4EE3\\u7801\\u7EC4\\u7EC7\\u6765\\u533A\\u5206\\u548C\\u9650\\u5236\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6539\\u52A8\\u80FD\\u8BA2\\u9605\\uFF0C\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u72B6\\u6001\\u672C\\u8EAB\"), \" + \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4FEE\\u6539\\u72B6\\u6001\\u7684\\u884C\\u4E3A\"), \" + \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u72B6\\u6001\\u80FD\\u88AB\\u8BA2\\u9605\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u80FD\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"connect\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"useHooks\"), \" \\u65B9\\u6CD5\\u4F7F\\u7528\\u548C\\u8BA2\\u9605\\u6570\\u636E\\u7684\\u53D8\\u5316\\u901A\\u77E5\\uFF0C\\u4ECE\\u800C\\u6E32\\u67D3\\u7EC4\\u4EF6\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6700\\u5927\\u7684\\u9A71\\u52A8\\u662F\\u80FD\\u591F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ts\"), \" \\u7684\\u7C7B\\u578B\\u9650\\u5236\\u548C\\u63A8\\u65AD\\uFF0C\\u81EA\\u52A8\\u63D0\\u793A\\u6570\\u636E\\u7684\\u8BBF\\u95EE\\u548C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"action\"), \" \\u7684\\u53C2\\u6570\\u548C\\u8FD4\\u56DE\\u3002\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u4E0D\\u7279\\u610F\\u5F3A\\u8C03\\u526F\\u4F5C\\u7528\\uFF0C\\u800C\\u5F3A\\u8C03 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u72B6\\u6001\\u672C\\u8EAB\"), \"\\u3001\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4FEE\\u6539\\u72B6\\u6001\\u7684\\u884C\\u4E3A\"), \" \\u548C \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u72B6\\u6001\\u80FD\\u88AB\\u8BA2\\u9605\"), \"\\uFF0C\\u6CA1\\u6709\\u526F\\u4F5C\\u7528\\u7684\\u7EAF\\u51FD\\u6570\\u4F1A\\u66F4\\u597D\\uFF0C\\u4F46\\u662F\\u6211\\u5E0C\\u671B\\u8FD9\\u662F\\u53EF\\u9009\\u7684\\uFF0C\\u800C\\u4E0D\\u662F\\u7528\\u5F88\\u5947\\u602A\\u7684\\u4EE3\\u7801\\u7EC4\\u7EC7\\u6765\\u533A\\u5206\\u548C\\u9650\\u5236\\u3002\")), mdx(\"h2\", null, \"\\u56DB\\u3001\\u5B9E\\u73B0\"), mdx(\"p\", null, \"\\u5B9E\\u73B0\\u7684\\u65F6\\u5019\\u751A\\u81F3\\u6CA1\\u6709\\u82B1\\u592A\\u591A\\u7CBE\\u529B\\uFF0C\\u4E5F\\u5F88\\u65B9\\u4FBF\\u7684\\u66FF\\u6362\\u6389\\u4E86\\u539F\\u6765\\u7684\\u6570\\u636E\\u7BA1\\u7406\\u5C42\\uFF0C\\u73B0\\u5728\\u7528\\u8D77\\u6765\\u611F\\u89C9\\u6E05\\u723D\\u5F88\\u591A\\uFF0C\\u4E5F\\u5B8C\\u5168\\u6EE1\\u8DB3\\u8F83\\u5927\\u9879\\u76EE\\u7684\\u4F7F\\u7528\\uFF0C\\u6BD4\\u5982 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/workpad-part-1\"\n  }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u4E00\"), \"\\u3002\"), mdx(\"p\", null, \"\\u4F7F\\u7528 novus \\u4E4B\\u540E\\uFF0C\\u72B6\\u6001\\u7684\\u5F15\\u5165\\u3001\\u52A8\\u4F5C\\u7684\\u8C03\\u7528\\u90FD\\u6709\\u5B8C\\u6574\\u7684\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u800C\\u4E14\\u5F88\\u81EA\\u7136\\u7684\\u5C06 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u3010\\u6570\\u636E\\u72B6\\u6001\\u3011\"), \" \\u548C \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u3010\\u72B6\\u6001\\u7684\\u6539\\u53D8\\u884C\\u4E3A\\u3011\"), \" \\u533A\\u5206\\uFF0C\\u5F02\\u6B65\\u548C\\u540C\\u6B65\\u7684\\u5F3A\\u8C03\\u53D8\\u4E3A\\u65B9\\u6CD5\\u548C\\u8D4B\\u503C\\u3002\"), mdx(\"p\", null, \"\\u6838\\u5FC3\\u4EE3\\u7801\\u4E5F\\u5C31\\u51E0\\u5341\\u884C\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u770B\\u4F5C\\u662F\\u4E00\\u4E2A\\u5E26\\u6709\\u72B6\\u6001\\u6570\\u636E\\u7684\\u8BA2\\u9605\\u901A\\u77E5\\u5DE5\\u5177\\uFF0C\\u4E3B\\u8981\\u662F\\u5B9E\\u73B0\\u4E86\\u5B8C\\u6574\\u7684 TypeScript \\u652F\\u6301\\uFF0C\\u5728\\u5177\\u4F53\\u4F7F\\u7528\\u7684\\u5730\\u65B9\\u6BD4\\u8F83\\u65B9\\u4FBF\\u3002\"), mdx(CodeWithPreview, {\n    column: true,\n    titleBar: \"novus.tsx\",\n    codes: [{\n      lang: \"ts\",\n      code: novus_novusCodeStrSimple\n    }],\n    withTitle: true,\n    mdxType: \"CodeWithPreview\"\n  }), mdx(\"h2\", null, \"\\u4E94\\u3001\\u4EE3\\u7801\\u548C\\u5B9E\\u4F8B\"), mdx(SourceCodeLink, {\n    url: \"https://cnb.cool/ubug/novus/novus\",\n    name: \"NOVUS\",\n    desc: \"\\uD83D\\uDCE6 \\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42\",\n    mdxType: \"SourceCodeLink\"\n  }), mdx(\"p\", null, \"\\u6216\\u8005\\u76F4\\u63A5\\u5728\\u672C\\u6587\\u770B\\uFF0C\\u5168\\u90E8\\u4EE3\\u7801\\u548C\\u5B9E\\u4F8B\\u5982\\u4E0B\\uFF1A\"), mdx(CodeWithPreview, {\n    column: true,\n    titleBar: \"实例\",\n    codes: [{\n      lang: \"ts\",\n      code: novus_novusCodeStr\n    }, {\n      lang: \"ts\",\n      code: novus_novusExampleStr1\n    }, {\n      lang: \"ts\",\n      code: novus_novusExampleStr\n    }],\n    withTitle: true,\n    preview: mdx(ExampleTodoExample, {\n      mdxType: \"ExampleTodoExample\"\n    }),\n    mdxType: \"CodeWithPreview\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"0d56e544-58e4-592d-9f5f-8518cdeb0cfc","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/thinking-behind-tech/thinking-behind-tech.md","id":"e64b5c46-84ab-5699-bc5b-d5460491e764","parent":{"name":"thinking-behind-tech","sourceInstanceName":"blog"},"excerpt":"1. Typescript…","fields":{"title":"🤔 技术背后隐含的思维方式","slug":"/blog/thinking-behind-tech","description":"很多技术的实现不是简单的解决某个场景，解决方案之后还有着不同的思考和思维方式，比如 Hooks、Flux、Fiber、TypeScript，这篇文章聊聊~~","date":"2020-02-16","redirects":null,"datetime":"2020-02-16 10:17:10","categories":["think"],"series":null,"tags":["整理","思考","Typescript","ReactHooks","Fiber","Flux"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","思考","Typescript","ReactHooks","Fiber","Flux"],"theme":null,"slug":"thinking-behind-tech","date":"2020-02-16 10:17:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"thinking-behind-tech\",\n  \"title\": \"🤔 技术背后隐含的思维方式\",\n  \"date\": \"2020-02-16 10:17:10\",\n  \"author\": \"Ubug\",\n  \"description\": \"很多技术的实现不是简单的解决某个场景，解决方案之后还有着不同的思考和思维方式，比如 Hooks、Flux、Fiber、TypeScript，这篇文章聊聊~~\",\n  \"categories\": [\"think\"],\n  \"tags\": [\"整理\", \"思考\", \"Typescript\", \"ReactHooks\", \"Fiber\", \"Flux\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"1. Typescript \\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\"), mdx(\"p\", null, \"\\u771F\\u6B63\\u7684\\u9762\\u5411\\u63A5\\u53E3\\u7F16\\u7A0B\\uFF0C\\u66F4\\u81EA\\u7136\\u5B8C\\u5907\\u7684\\u6A21\\u5757\\u548C\\u903B\\u8F91\\u62BD\\u8C61\\uFF0C\\u8BA9\\u524D\\u7AEF\\u5F00\\u53D1\\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\\u4ECE\\u600E\\u4E48\\u5B9E\\u73B0\\u7ED3\\u679C\\uFF0C\\u53D8\\u6210\\u4E86\\u66F4\\u9AD8\\u8D28\\u91CF\\u7684\\u9700\\u6C42\\u4EA4\\u4ED8\\uFF0C\\u53BB\\u601D\\u8003\\u63A5\\u53E3\\u7684\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u53BB\\u8BBE\\u8BA1\\u6A21\\u5757\\u548C\\u4EE3\\u7801\\uFF0C\\u66F4\\u4F55\\u51B5\\u4EC5\\u4EC5\\u662F\\u4EE3\\u7801\\u63D0\\u793A\\u548C\\u5BF9\\u63A5\\u8054\\u8C03\\u5C31\\u8DB3\\u591F\\u8BA9\\u4F60\\u723D\\u7FFB\\u5929\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u4F20\\u7EDF\\u7684\\u524D\\u7AEF\\u5F00\\u53D1\\uFF0C\\u5F88\\u591A\\u6CA1\\u6709\\u4EAB\\u53D7\\u8FC7\\u9759\\u6001\\u7C7B\\u578B\\u8BED\\u8A00\\u5E26\\u6765\\u7684\\u64CD\\u4F5C\\u5DEE\\u5F02\\uFF0C\\u8C03\\u7528\\u65B9\\u6CD5\\u5B9E\\u73B0\\u529F\\u80FD\\u7684\\u903B\\u8F91\\u4E5F\\u5E76\\u6CA1\\u8BF4\\u591A\\u590D\\u6742\\uFF0C\\u6587\\u4EF6\\u7ED3\\u6784\\u7EC4\\u7EC7\\u7684\\u6A21\\u5757\\u5316\\u3001\\u7EC4\\u4EF6\\u5316\\u4E5F\\u80FD\\u6EE1\\u8DB3\\u9700\\u6C42\\u5B9E\\u73B0\\u9AD8\\u8D28\\u91CF\\u7684\\u4EE3\\u7801\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u590D\\u6742\\u6A21\\u5757\\u4E4B\\u95F4\\u7684\\u96C6\\u6210\\u4ECE\\u6765\\u4E0D\\u662F\\u90A3\\u4E48\\u987A\\u5229\\uFF0C\\u529F\\u80FD\\u7684\\u5347\\u7EA7\\u91CD\\u6784\\u3001\\u9879\\u76EE\\u7684\\u4EA4\\u63A5\\u4E00\\u76F4\\u662F\\u5F00\\u53D1\\u5F88\\u91CD\\u8981\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8FD9\\u5757\\u7ECF\\u5E38\\u4F1A\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u5E76\\u4E0D\\u662F\\u6BCF\\u4E2A\\u4EBA\\u3001\\u6BCF\\u6B21\\u90FD\\u80FD\\u6E05\\u695A\\u7684\\u8BB0\\u4F4F\\u9879\\u76EE\\u7684\\u63A5\\u53E3\\u3001\\u53C2\\u6570\\u3001\\u7C7B\\u578B\\u7B49\\uFF0C\\u8FD9\\u5757\\u51FA\\u73B0\\u7684\\u9519\\u8BEF\\u5728\\u524D\\u7AEF\\u5360\\u4E86\\u5F88\\u5927\\u4E00\\u4E2A\\u6BD4\\u4F8B\\uFF0C\\u6240\\u4EE5\\u5F88\\u591A\\u7684\\u6D4B\\u8BD5\\u624D\\u80FD\\u8986\\u76D6\\u8FD9\\u5757\\u7684\\u8D28\\u91CF\\u4FDD\\u8BC1\\u3002\\u53EF\\u662F\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u9759\\u6001\\u8BED\\u8A00\\u5176\\u5B9E\\u5E76\\u4E0D\\u662F\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u4E4B\\u524D\\u7684\\u524D\\u7AEF\\u4EE3\\u7801\\u63D0\\u793A\\u4F9D\\u8D56\\u4E8E document \\u6CE8\\u91CA\\uFF0C\\u8FD9\\u5176\\u5B9E\\u5BF9\\u5F88\\u591A\\u4EBA\\u662F\\u4E00\\u79CD\\u8D1F\\u62C5\\uFF0C\\u5F88\\u591A\\u4EBA\\u53EA\\u4F7F\\u7528\\u5185\\u7F6E\\u7684\\u5B98\\u65B9\\u63D0\\u793A\\uFF0C\\u4E0D\\u80FD\\u4EAB\\u53D7\\u7C7B\\u578B\\u601D\\u7EF4\\u7684\\u597D\\u5904\\u3002TS \\u4F7F\\u7528\\u4E00\\u4E9B\\u6807\\u8BB0\\u548C\\u7C7B\\u578B\\u58F0\\u660E\\u80FD\\u591F\\u5F88\\u597D\\u7684\\u5B9E\\u73B0\\u5B8C\\u6574\\u7684\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u5E26\\u6709\\u4EE3\\u7801\\u63D0\\u793A\\u7684\\u7F16\\u7A0B\\u4F53\\u9A8C\\u80FD\\u8BA9\\u6548\\u7387\\u548C\\u8D28\\u91CF\\u66F4\\u597D\\uFF0C\\u81F3\\u5C11\\u4EE3\\u7801\\u8D28\\u91CF\\u91CC\\u9762\\u9759\\u6001\\u68C0\\u67E5\\u6CA1\\u6709\\u95EE\\u9898\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u90FD\\u662F Typescript \\u5E26\\u6765\\u7684\\u91CD\\u8981\\u7279\\u6027\\uFF0CTS \\u80FD\\u5E2E\\u6211\\u4EEC\\u68B3\\u7406\\u6E05\\u4E0D\\u540C\\u7684\\u63A5\\u53E3\\u3001\\u5929\\u751F\\u7684\\u8BA9\\u4F60\\u77E5\\u9053\\u8FD9\\u4E2A\\u63A5\\u53E3\\u5E94\\u8BE5\\u600E\\u4E48\\u6837\\u7684\\uFF0C\\u5728\\u8FD0\\u884C\\u65F6\\u624D\\u80FD\\u770B\\u5230\\u7684\\u95EE\\u9898\\u5728\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\u5C31\\u5F88\\u660E\\u663E\\u7684\\u66B4\\u9732\\u4E86\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53E6\\u5916\\u4E5F\\u5199\\u4E86\\u4E00\\u7BC7\\u8BE6\\u7EC6\\u7684\\u6587\\u7AE0\\u8BF4 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/typescript\"\n  }, \"\\uD83C\\uDFC3\\u200D\\u2642\\uFE0F TypeScript \\u4EE5\\u53CA\\u4E00\\u4E9B\\u7406\\u89E3\\u548C\\u6280\\u5DE7\"))), mdx(\"h2\", null, \"2. ReactHooks \\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\"), mdx(\"p\", null, \"hooks \\u7684\\u601D\\u60F3\\u662F\\u5F00\\u53D1\\u8005\\u4E0D\\u518D\\u9700\\u8981\\u53BB\\u7406\\u6E05\\u6BCF\\u4E00\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u51FD\\u6570\\u7684\\u89E6\\u53D1\\u65F6\\u673A\\uFF0C\\u4EE5\\u53CA\\u5728\\u91CC\\u9762\\u5904\\u7406\\u903B\\u8F91\\u4F1A\\u6709\\u54EA\\u4E9B\\u5F71\\u54CD\\u3002\\u800C\\u662F\\u66F4\\u5173\\u6CE8\\u53BB\\u601D\\u8003\\u54EA\\u4E9B\\u662F\\u72B6\\u6001\\uFF0C\\u54EA\\u4E9B\\u662F\\u526F\\u4F5C\\u7528\\uFF0C\\u54EA\\u4E9B\\u662F\\u9700\\u8981\\u7F13\\u5B58\\u7684\\u590D\\u6742\\u8BA1\\u7B97\\u548C\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"p\", null, \"\\u76F8\\u6BD4 class \\u7684\\u751F\\u547D\\u5468\\u671F\\u7684\\u903B\\u8F91\\u7EC4\\u7EC7\\u5F62\\u5F0F\\uFF0C\\u4ECE\\u6574\\u4E2A\\u7EC4\\u4EF6\\u7684\\u6302\\u8F7D\\u5230\\u5378\\u8F7D\\u7684\\u4E8B\\u4EF6\\u9A71\\u52A8\\u3002hooks \\u4EE3\\u8868\\u7684\\u662F\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u4E2D\\u72B6\\u6001\\u3001\\u884C\\u4E3A\\u548C\\u526F\\u4F5C\\u7528\\uFF0C\\u8FD9\\u4E5F\\u662F\\u4E3A\\u4EC0\\u4E48\\u6CA1\\u6709\\u7528 class \\u751F\\u547D\\u5468\\u671F\\u90A3\\u4E00\\u5957\\u73B0\\u6210\\u7684\\u903B\\u8F91\\u5B9E\\u73B0\\u7C7B\\u4F3C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onComponentMounted(callback)\"), \" \\u7684\\u63A5\\u53E3\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const [state, setState] = useState(0)\\nuseEffect(()=>{\\n  // \\u6267\\u884C\\u4E00\\u4E9B\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\n  return ()=>{\\n    // \\u6E05\\u7406\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\n  }\\n})\\n\\n// ============ \\u8981\\u6BD4\\u4E0B\\u9762\\u4F18\\u96C5\\u7684\\u591A\\nconst states\\nonComponentDidMount((){\\n  // \\u6267\\u884C\\u4E00\\u4E9B\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\n})\\nonComponentDidUpdate((){\\n  // \\u6267\\u884C\\u4E00\\u4E9B\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\n  // \\u66F4\\u65B0\\u72B6\\u6001\\n})\\nonComponentWillUnmount((){\\n  // \\u6E05\\u7406\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\n})\\n\")), mdx(\"p\", null, \"\\u6BD4\\u8F83\\u4E4B\\u540E\\u5C31\\u80FD\\u611F\\u89C9\\u5230\\u4E0D\\u540C\\u7684\\u4EE3\\u7801\\u7EC4\\u7EC7\\uFF0C\\u4EE3\\u8868\\u7740\\u4E0D\\u540C\\u7684\\u601D\\u7EF4\\u6A21\\u5F0F\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u53E6\\u5916\\u4E5F\\u5199\\u4E86\\u4E00\\u7BC7\\u8BE6\\u7EC6\\u7684\\u6587\\u7AE0\\u8BF4 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/react-hooks-vs-class\"\n  }, \"\\u2693 React Hooks \\u7406\\u89E3\"))), mdx(\"h2\", null, \"3. Flux \\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\"), mdx(\"p\", null, \"\\u5728\\u786E\\u5B9E\\u5F88\\u590D\\u6742\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u4E2D\\uFF0C\\u5F3A\\u5236\\u6027\\u7684\\u96C6\\u4E2D\\u767B\\u8BB0\\u6BCF\\u4E00\\u6B21\\u4FEE\\u6539\\u548C\\u5206\\u53D1\\uFF0C\\u80FD\\u591F\\u5C06 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6570\\u636E\\u72B6\\u6001\"), \" \\u3001\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6570\\u636E\\u72B6\\u6001\\u7684\\u4F7F\\u7528\"), \" \\u548C \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4FEE\\u6539\\u6570\\u636E\\u72B6\\u6001\\u7684\\u884C\\u4E3A\"), \" \\u5206\\u79BB\\uFF0C\\u5BF9\\u6574\\u4E2A\\u6846\\u67B6\\u7684\\u89E3\\u8026\\u662F\\u5F88\\u6709\\u6548\\u7684\\u3002\"), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"../../novus/redux-architecture.png\",\n    \"alt\": \"redux-architecture.png\"\n  })), mdx(\"div\", {\n    \"style\": {},\n    \"'flex',\": \"\",\n    \"justifycontent:\": \"\",\n    \"'center'}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"./novus/chart.svg\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"novus \\u5355\\u5411\\u6570\\u636E\\u6D41\"), \"\\n  \")), mdx(\"p\", null, \"flux \\u7684\\u6A21\\u5F0F\\u672C\\u8EAB\\u53EF\\u80FD\\u5728\\u5F88\\u591A\\u5730\\u65B9\\u90FD\\u6709\\u76F8\\u4F3C\\u7684\\u5B9E\\u73B0\\uFF0C\\u6BD4\\u5982\\u5E26\\u6709\\u6570\\u636E\\u64CD\\u4F5C\\u65B9\\u6CD5\\u7684\\u53D1\\u5E03\\u8BA2\\u9605\\u6A21\\u5F0F\\u3001\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u90FD\\u53EF\\u4EE5\\u5B9E\\u73B0\\u8FD9\\u4E2A\\u80FD\\u529B\\uFF0C\\u8FD9\\u91CC\\u5F3A\\u8C03\\u7684\\u662F\\u6570\\u636E\\u89E3\\u8026\\u7684\\u601D\\u60F3\\u3002\"), mdx(\"p\", null, \"flux \\u5C06\\u4E00\\u4E2A\\u7EA6\\u5B9A\\u9650\\u5236\\u6B7B\\uFF0C\\u80FD\\u8FBE\\u5230\\u610F\\u60F3\\u4E0D\\u5230\\u7684\\u597D\\u5904\\uFF1A\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6570\\u636E\\u3001\\u4F7F\\u7528\\u6570\\u636E\\u3001\\u4FEE\\u6539\\u6570\\u636E\\u7684\\u903B\\u8F91\\u5206\\u79BB\"), \"\\u3002\\u5B9E\\u8DF5\\u8D77\\u6765\\u5C31\\u662F\\u89C6\\u56FE\\u5C42\\u4E0D\\u5141\\u8BB8\\u76F4\\u63A5\\u4FEE\\u6539\\u6570\\u636E\\uFF0C\\u53EA\\u80FD\\u8C03\\u7528 action \\u4FEE\\u6539\\u540E\\u518D\\u5206\\u53D1\\u7ED9\\u89C6\\u56FE\\u5C42\\u4F7F\\u7528\\u3002\\u8FD9\\u6837\\u4E00\\u4E2A\\u7EA6\\u5B9A\\u5C31\\u5B9E\\u73B0\\u4E86\\u5355\\u5411\\u6570\\u636E\\u6D41\\u7684\\u6982\\u5FF5\\uFF0C\\u6570\\u636E\\u4E0D\\u518D\\u662F\\u60F3\\u6539\\u5C31\\u6539\\uFF0C\\u53EA\\u80FD\\u901A\\u8FC7\\u7EDF\\u4E00\\u7EF4\\u62A4\\u7684\\u4FEE\\u6539\\u52A8\\u4F5C\\uFF0C\\u8FD9\\u6837\\u6570\\u636E\\u7684\\u53D8\\u52A8\\u5C31\\u53D8\\u5F97\\u53EF\\u4EE5\\u9884\\u6D4B\\u3002\"), mdx(\"p\", null, \"\\u5728\\u4E0D\\u5F15\\u5165\\u5355\\u72EC\\u6570\\u636E\\u5C42\\u7684\\u65F6\\u5019\\uFF0C\\u5F88\\u591A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u7684\\u6570\\u636E\\u901A\\u4FE1\\u90FD\\u662F\\u901A\\u8FC7 props \\u4E0B\\u53D1\\uFF0C\\u7136\\u540E\\u901A\\u8FC7 onCallback \\u6765\\u83B7\\u53D6\\u66F4\\u65B0\\u4E8B\\u4EF6\\uFF0C\\u751A\\u81F3\\u76F4\\u63A5\\u5728\\u5B50\\u7EC4\\u4EF6\\u4E2D\\u4FEE\\u6539 props \\u7684\\u5F15\\u7528\\u3002\\u8FD9\\u6837\\u7684\\u540E\\u679C\\u5C31\\u662F\\u6CA1\\u529E\\u6CD5\\u77E5\\u9053\\u4E00\\u4E2A\\u72B6\\u6001\\u7684\\u6539\\u53D8\\u662F\\u7531\\u8C01\\u5F15\\u8D77\\u7684\\uFF0C\\u94FE\\u8DEF\\u5F88\\u957F\\u4E0D\\u89C4\\u8303\\u5F88\\u96BE\\u53BB\\u8C03\\u8BD5\\u3002\"), mdx(\"p\", null, \"\\u800C\\u5F15\\u5165 flux \\u6982\\u5FF5\\u4E4B\\u540E\\u7684\\u7EA6\\u675F\\u5C31\\u662F\\uFF0C\\u6570\\u636E\\u8FD9\\u4E2A\\u4E1C\\u897F\\u4F60\\u4EEC\\u7236\\u5B50\\u7EC4\\u4EF6\\u901A\\u4FE1\\u53EF\\u4EE5\\uFF0C\\u4F46\\u662F\\u5168\\u5C40\\u7684\\u5E94\\u7528\\u72B6\\u6001 store \\u5FC5\\u987B\\u4EA4\\u7531\\u4E2D\\u5FC3\\u5316\\u7BA1\\u7406\\uFF0C\\u6BCF\\u6B21\\u4FEE\\u6539\\u90FD\\u9700\\u8981\\u901A\\u8FC7\\u6807\\u51C6\\u7684\\u4FEE\\u6539\\u51FD\\u6570 action \\u6765\\u6267\\u884C\\uFF0C\\u6700\\u540E\\u7684\\u7ED3\\u679C\\u66F4\\u65B0\\u9700\\u8981\\u901A\\u8FC7 reducer \\u540C\\u6B65\\u66F4\\u65B0\\u5230\\u6570\\u636E\\u4E2D\\u5FC3\\uFF0C\\u6BCF\\u4E2A\\u4F7F\\u7528\\u7684\\u754C\\u9762\\u7EC4\\u4EF6\\u4F1A\\u6536\\u5230\\u72B6\\u6001\\u66F4\\u65B0\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"/blog/novus\"\n  }, \"\\uD83D\\uDCE6 \\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\"))), mdx(\"h2\", null, \"4. React Fiber \\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\"), mdx(\"p\", null, \"\\u5728\\u524D\\u7AEF\\u5B9E\\u73B0\\u4EFB\\u52A1\\u7684\\u8C03\\u5EA6\\u548C\\u63A7\\u5236\\u6743\\u7684\\u8F6C\\u79FB\\uFF0C\\u907F\\u514D\\u8C03\\u7528\\u6808\\u963B\\u585E\\u7528\\u6237\\u54CD\\u5E94\\u3002\"), mdx(\"p\", null, \"React 16 \\u7248\\u672C\\u91C7\\u7528\\u65B0\\u7684 Fiber \\u67B6\\u6784\\uFF0CReact Fiber \\u662F\\u5BF9\\u6838\\u5FC3\\u7B97\\u6CD5\\u7684\\u4E00\\u6B21\\u91CD\\u65B0\\u5B9E\\u73B0\\u3002\\u4E4B\\u524D\\u7684\\u67B6\\u6784\\u662F\\u540C\\u6B65\\u6E32\\u67D3\\u7EC4\\u4EF6\\u6811\\u7684\\uFF0C\\u540C\\u6B65\\u7684\\u6982\\u5FF5\\u662F\\u4E00\\u65E6\\u8FDB\\u5165\\u8C03\\u7528\\u6808\\u5F00\\u59CB\\u5C31\\u8981\\u6267\\u884C\\u5B8C\\u6BD5\\uFF0C\\u4E00\\u65E6\\u7EC4\\u4EF6\\u6811\\u7684\\u6DF1\\u5EA6\\u5F88\\u6DF1 js \\u9700\\u8981\\u8BA1\\u7B97\\u7684\\u6E32\\u67D3\\u8D8A\\u591A\\uFF0C\\u5373\\u4F7F\\u6DFB\\u52A0 shouldComponenntUpdate \\u7B49\\u65B9\\u6CD5\\u6765\\u4F18\\u5316\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u5FC5\\u8981\\u7684\\u66F4\\u65B0\\u4F9D\\u7136\\u6CA1\\u529E\\u6CD5\\u89E3\\u51B3\\uFF0C\\u6D4F\\u89C8\\u5668\\u7684\\u54CD\\u5E94\\u53EA\\u80FD\\u8981\\u4F9D\\u8D56\\u4E8E js \\u7684\\u539F\\u751F\\u6267\\u884C\\u5806\\u6808\\u4E86\\u3002\"), mdx(\"p\", null, \"JavaScript \\u539F\\u751F\\u7684\\u6267\\u884C\\u6A21\\u578B\\u662F\\u901A\\u8FC7Call stack\\uFF08\\u8C03\\u7528\\u6808\\uFF09\\u6765\\u7BA1\\u7406\\u51FD\\u6570\\u6267\\u884C\\u72B6\\u6001\\uFF0C\\u7531\\u5F15\\u64CE\\u7BA1\\u7406\\uFF0C\\u67D0\\u4E00\\u4E2A\\u6267\\u884C\\u6808\\u4E00\\u65E6\\u5F00\\u59CB\\uFF0C\\u5C31\\u4F1A\\u4E00\\u76F4\\u6267\\u884C\\uFF0C\\u76F4\\u5230\\u8FD9\\u4E2A\\u6267\\u884C\\u6808\\u6E05\\u7A7A\\uFF0C\\u65E0\\u6CD5\\u6309\\u9700\\u4E2D\\u6B62\\u3002\\u5168\\u90E8\\u7684\\u6267\\u884C\\u6808\\u53EF\\u80FD\\u4F1A\\u6709\\u4E00\\u4E9B\\u4EFB\\u52A1\\u8C03\\u5EA6\\uFF0C\\u4F46\\u662F\\u5927\\u4F53\\u4E0A\\u5F88\\u5BB9\\u6613\\u51FA\\u73B0\\u6267\\u884C\\u6808\\u8017\\u65F6\\u5F88\\u957F\\u5BFC\\u81F4\\u754C\\u9762\\u65E0\\u54CD\\u5E94\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u800C\\u4E00\\u65E6\\u539F\\u751F\\u8C03\\u7528\\u6808\\u4E2D\\uFF0C\\u7EC4\\u4EF6\\u6E32\\u67D3\\u7684\\u8C03\\u7528\\u6808\\u6267\\u884C\\u8D85\\u8FC7 16.67ms\\uFF0C\\u4F9D\\u7136\\u6CA1\\u80FD\\u591F\\u5C06\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C(\\u6BD4\\u5982 onClick)\\u7684\\u4EFB\\u52A1\\u961F\\u5217\\u53D6\\u51FA\\u6765\\u6267\\u884C\\uFF0C\\u754C\\u9762\\u5C31\\u4F1A\\u51FA\\u73B0\\u4F4E\\u4E8E 60fps \\u7684\\u5361\\u987F\\u3002\"), mdx(\"div\", {\n    \"style\": {},\n    \"'flex',\": \"\",\n    \"justifycontent:\": \"\",\n    \"'center'}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"/chart-75930d3e99cd1f8e1c535f9026ae4dd5.svg\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6E32\\u67D3\\u7684\\u4E8B\\u4EF6\\u961F\\u5217\"), \"\\n  \")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u662F\\u539F\\u751F\\u4EFB\\u52A1\\u961F\\u5217\\u7684\\u673A\\u5236\\u51B3\\u5B9A\\u7684\\uFF0C\\u6D4F\\u89C8\\u5668\\u7684 Event Loop \\u6A21\\u578B\\u6CA1\\u529E\\u6CD5\\u533A\\u5206\\u54EA\\u4E2A\\u4EFB\\u52A1\\u624D\\u662F\\u7528\\u6237\\u9700\\u8981\\u7684\\uFF0C\\u6267\\u884C\\u6808\\u4E5F\\u6CA1\\u529E\\u6CD5\\u7EC8\\u7AEF\\u5207\\u6362\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u8FD9\\u4E2A\\u4E8B\\u60C5\\u9700\\u8981\\u6846\\u67B6\\u672C\\u8EAB\\u6765\\u638C\\u63A7\\uFF0C\\u4E5F\\u5C31\\u662F\\u8BA9\\u6846\\u67B6\\u6765\\u8C03\\u5EA6\\u6E32\\u67D3\\uFF08\\u4E0E\\u6D4F\\u89C8\\u5668\\u6E32\\u67D3\\u4E0D\\u540C\\uFF0C\\u5F3A\\u8C03\\u7684\\u662F\\u7EC4\\u4EF6\\u7684 render\\uFF09\\u7684\\u90E8\\u5206\\uFF0C\\u6240\\u4EE5 Fiber \\u662F\\u7528\\u6765\\u63A7\\u5236\\u6BCF\\u4E2A\\u7EC4\\u4EF6\\u7684\\u6E32\\u67D3\\u65F6\\u673A\\u3002\"), mdx(\"p\", null, \"\\u5728\\u601D\\u7EF4\\u65B9\\u5F0F\\u4E0A\\u8FD9\\u662F\\u4E00\\u4E2A\\u66F4\\u7CBE\\u7EC6\\u5316\\u7684\\u6267\\u884C\\u65B9\\u5F0F\\uFF0C\\u8BA9\\u6BCF\\u4E00\\u5E27\\u7684\\u6E32\\u67D3\\u80FD\\u591F\\u53EF\\u63A7\\uFF0C\\u6BCF\\u6B21\\u6E32\\u67D3\\u5B8C\\u4E4B\\u540E\\u5224\\u65AD\\u8FD8\\u6709\\u6CA1\\u6709\\u5269\\u4F59\\u65F6\\u95F4\\uFF0C\\u6CA1\\u6709\\u4E86\\u7684\\u8BDD\\u5C31\\u628A\\u63A7\\u5236\\u6743\\u4EA4\\u7ED9\\u6D4F\\u89C8\\u5668\\u6765\\u6267\\u884C\\u7528\\u6237\\u64CD\\u4F5C\\u54CD\\u5E94\\uFF0C\\u5904\\u7406\\u5B8C\\u4E4B\\u540E\\u518D\\u7EE7\\u7EED\\u6E32\\u67D3\\uFF0C\\u5B9E\\u73B0\\u4E86\\u5206\\u7247\\u6E32\\u67D3\\u7684\\u903B\\u8F91\\uFF0C\\u6700\\u7EC8\\u5B9E\\u73B0\\u8FD9\\u79CD\\u5728\\u524D\\u7AEF\\u4E2D\\u63A5\\u7BA1\\u6574\\u4E2A\\u8C03\\u5EA6\\u7684\\u6548\\u679C\\uFF0Cbrilliant\\uFF01\\uFF01\\uFF01\"), mdx(\"p\", null, \"\\u53C2\\u8003:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://zhuanlan.zhihu.com/p/63346965\"\n  }, \"TypeScript - \\u4E00\\u79CD\\u601D\\u7EF4\\u65B9\\u5F0F\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://zhuanlan.zhihu.com/p/73866928\"\n  }, \"\\u65E0\\u610F\\u8BC6\\u8BBE\\u8BA1--\\u590D\\u76D8React Hook\\u7684\\u521B\\u9020\\u8FC7\\u7A0B\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://segmentfault.com/a/1190000020110045\"\n  }, \"Fiber \\u8C03\\u5EA6\\u51FD\\u6570\\u7684\\u6267\\u884C\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://juejin.im/post/5d12c907f265da1b6d4033c5\"\n  }, \"Deep In React \\u4E4B\\u6D45\\u8C08 React Fiber \\u67B6\\u6784\\uFF08\\u4E00\\uFF09\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://github.com/rowone/blog/issues/3\"\n  }, \"\\u5173\\u4E8E\\u4EFB\\u52A1\\u548C\\u5FAE\\u4EFB\\u52A1\\u7684\\u5165\\u961F\\u4E0E\\u8C03\\u5EA6\"))));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/workpad/workpad-part-7.md","id":"0a7e4be6-54c6-552e-b3fc-39ad3df74843","parent":{"name":"workpad-part-7","sourceInstanceName":"blog"},"excerpt":"一、什么是 DirtyDiff dirty 的意思在 Git 中表示当前本地代码与提交版本相比有修改，还没有提交。很多编辑器就会在行号旁边用颜色标识当前行的修改状态，用以提示用户当前文件状态，平时使用的时候是一个很好用的功能。 二、功能点 diffComputer 用来计算当前文件和 已提交文件的差别（修改、新增和删除） 将计算出来的差别转为 decorations 装饰器，将装饰器放到具体的每行里面 用户点击 decorations 后打开 peek 视图（OverlayWidget…","fields":{"title":"🌋 WebIDE 的开发记录其七（DirtyDiff 支持）","slug":"/blog/workpad-part-7","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第七篇文章，谈谈怎么在 monaco-editor 上添加编辑器必备的 Git Dirty Diff 功能。","date":"2020-02-05","redirects":null,"datetime":"2020-02-05 22:43:52","categories":["webide"],"series":"WebIDE 的开发记录","tags":["思考","整理","WorkPad","WebIDE","云开发","Dirty Diff"],"status":"online"},"frontmatter":{"published":null,"tags":["思考","整理","WorkPad","WebIDE","云开发","Dirty Diff"],"theme":null,"slug":"workpad-part-7","date":"2020-02-05 22:43:52"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"workpad-part-7\",\n  \"title\": \"🌋 WebIDE 的开发记录其七（DirtyDiff 支持）\",\n  \"date\": \"2020-02-05 22:43:52\",\n  \"author\": \"Ubug\",\n  \"description\": \"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第七篇文章，谈谈怎么在 monaco-editor 上添加编辑器必备的 Git Dirty Diff 功能。\",\n  \"series\": \"WebIDE 的开发记录\",\n  \"categories\": [\"webide\"],\n  \"tags\": [\"思考\", \"整理\", \"WorkPad\", \"WebIDE\", \"云开发\", \"Dirty Diff\"],\n  \"banner\": \"./WorkPad-demo.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"\\u4E00\\u3001\\u4EC0\\u4E48\\u662F DirtyDiff\"), mdx(\"p\", null, \"dirty \\u7684\\u610F\\u601D\\u5728 Git \\u4E2D\\u8868\\u793A\\u5F53\\u524D\\u672C\\u5730\\u4EE3\\u7801\\u4E0E\\u63D0\\u4EA4\\u7248\\u672C\\u76F8\\u6BD4\\u6709\\u4FEE\\u6539\\uFF0C\\u8FD8\\u6CA1\\u6709\\u63D0\\u4EA4\\u3002\\u5F88\\u591A\\u7F16\\u8F91\\u5668\\u5C31\\u4F1A\\u5728\\u884C\\u53F7\\u65C1\\u8FB9\\u7528\\u989C\\u8272\\u6807\\u8BC6\\u5F53\\u524D\\u884C\\u7684\\u4FEE\\u6539\\u72B6\\u6001\\uFF0C\\u7528\\u4EE5\\u63D0\\u793A\\u7528\\u6237\\u5F53\\u524D\\u6587\\u4EF6\\u72B6\\u6001\\uFF0C\\u5E73\\u65F6\\u4F7F\\u7528\\u7684\\u65F6\\u5019\\u662F\\u4E00\\u4E2A\\u5F88\\u597D\\u7528\\u7684\\u529F\\u80FD\\u3002\"), mdx(\"div\", {\n    \"style\": {},\n    \"'flex',\": \"\",\n    \"justifycontent:\": \"\",\n    \"'center'}}\": \"\"\n  }, \"\\n  \", mdx(\"withfigcaption\", {\n    parentName: \"div\",\n    \"title\": \"动图演示实现的效果\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"withfigcaption\",\n    \"src\": \"/git_dirty_diff2-dd9082be3f275f4bbcfefd15d958b638.gif\"\n  }), \"\\n  \")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"681px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5667e149497d08e9c4e649271c74c23f/bb1dd/dirty_diff_3.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"73.74517374517376%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAACdElEQVQ4y42T6W7TQBSF/QxscbyO7XhfE++Jk5JWooAERIWChMT7P8bhjKNCgEr0x6c7vtdzZu4yiu0K5L6N90LF1jVRWjp0w4RpGsR8EoZhwLIsjOMIxbQtFCuB+9jBbZmiEwY04+lil4KbzQaKJQRSh4JVjF2RIksT2LYNTdOg6/ofSN/ffin2ILjdbinIzZ7noYkCXHcN+iJDEAQISRRF8H0fYRgiSRKUVYU8O8elP2Zc7pXCUnCaJgq6KxRRiB+Zi7v9iNuhw7Tfz6dJhmFA1/fo2xa7rkVDK8Vd14VNHMeZ05ZZHY9HKDaVXTqTosS4P2A6XKFmLSRVVWLNW6W8lWeZqPVXv1PVNWz0BTRZCp01Z9p5nkNxgxBenCBgWkVZIcsLJAzEKUWYWhDFCOMYgv99cVVErLfpuDBI6dj46i0h5C35LeurvLu7x82HE958POHTt++4Pd3h7ekz+tc32ExXaA9HVOOEpOlxaBoUtGk7ICNxM2DPEvR7ZjXuYLPBii0c5i8ghAs/YJFXvJW0ng+H9ZVWxjTNwEuyJNqFfaZqbFCIPg1g2iaUKPbZTW70LWLCD20K22d7sQ4iB2EkiDOv52/Orh9YqOsM2zI5C6ZVgHWXYXe9nslbD0XLzncrVH3wi7L3H4GxIZzRjOU8j0rMYsauh13dYmo6VGGMOslQ+ExbM7EyLKz0R5j9jC+W8Jm2pqowOD7KmnXakH2W48AOT+yuXE9pioGDO7LL/0I/Oz+y8yPf/Sjn0LQoaPEtcwwsT+D5QsULnrLgXD2gMoX/wjmWSDFLCjqCBQ88DnLNV9Gf3yVPfDLyf+M82PLF/ATrT7KMb1X0oAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"重点实现的元素\",\n    \"title\": \"重点实现的元素\",\n    \"src\": \"/static/5667e149497d08e9c4e649271c74c23f/bb1dd/dirty_diff_3.png\",\n    \"srcSet\": [\"/static/5667e149497d08e9c4e649271c74c23f/2c191/dirty_diff_3.png 259w\", \"/static/5667e149497d08e9c4e649271c74c23f/86b01/dirty_diff_3.png 518w\", \"/static/5667e149497d08e9c4e649271c74c23f/bb1dd/dirty_diff_3.png 681w\"],\n    \"sizes\": \"(max-width: 681px) 100vw, 681px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u91CD\\u70B9\\u5B9E\\u73B0\\u7684\\u5143\\u7D20\"), \"\\n  \")), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u529F\\u80FD\\u70B9\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"diffComputer \\u7528\\u6765\\u8BA1\\u7B97\\u5F53\\u524D\\u6587\\u4EF6\\u548C \\u5DF2\\u63D0\\u4EA4\\u6587\\u4EF6\\u7684\\u5DEE\\u522B\\uFF08\\u4FEE\\u6539\\u3001\\u65B0\\u589E\\u548C\\u5220\\u9664\\uFF09\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5C06\\u8BA1\\u7B97\\u51FA\\u6765\\u7684\\u5DEE\\u522B\\u8F6C\\u4E3A decorations \\u88C5\\u9970\\u5668\\uFF0C\\u5C06\\u88C5\\u9970\\u5668\\u653E\\u5230\\u5177\\u4F53\\u7684\\u6BCF\\u884C\\u91CC\\u9762\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7528\\u6237\\u70B9\\u51FB decorations \\u540E\\u6253\\u5F00 peek \\u89C6\\u56FE\\uFF08OverlayWidget + ViewZone\\uFF09\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"peekView \\u4E2D\\u663E\\u793A diff \\u7F16\\u8F91\\u5668\")), mdx(\"h2\", null, \"\\u4E09\\u3001\\u96C6\\u6210\"), mdx(\"h3\", null, \"1. diffComputer \\u8BA1\\u7B97\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u5982\\u679C\\u8BA9\\u6211\\u4EEC\\u81EA\\u5DF1\\u505A\\u7684\\u8BDD\\u4E5F\\u662F\\u80FD\\u5B9E\\u73B0\\u7684\\uFF0C\\u4F46\\u662F monaco-editor \\u91CC\\u9762\\u5DF2\\u7ECF\\u96C6\\u6210\\u4E86\\u8FD9\\u4E2A\\u5DE5\\u5177\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u56E0\\u4E3A\\u6211\\u4EEC\\u5F15\\u5165\\u7684\\u662F amd \\u89C4\\u8303\\u7684 monaco-editor\\uFF0C\\u8FD9\\u91CC\\u80FD\\u76F4\\u63A5\\u7528 require \\u5F15\\u5165\\u5185\\u90E8\\u7684\\u7EC4\\u4EF6\\uFF08\\u5982\\u679C\\u662F webpack \\u9700\\u8981\\u5355\\u72EC import \\u6253\\u5305\\uFF09\\nconst diffComputer = require('monaco-editor/esm/vs/editor/common/diff/diffComputer.js');\\n\\n// \\u5177\\u4F53\\u7684\\u8BA1\\u7B97\\u903B\\u8F91\\nconst DiffComputer = diffComputer.DiffComputer;\\n\\n// \\u8BA1\\u7B97\\u51FD\\u6570\\nconst computeDirtyDiff = (originalLines, modifiedModel) => {\\n  // \\u8FB9\\u754C\\u6761\\u4EF6\\u5904\\u7406\\n  if (!modifiedModel || modifiedModel.getValue() === '') return [];\\n  // \\u83B7\\u53D6\\u7F16\\u8F91\\u5668\\u5F53\\u524D\\u7684\\u5B9E\\u9645\\u5185\\u5BB9\\n  let modifiedLines = modifiedModel.getLinesContent();\\n  // \\u5229\\u7528\\u5185\\u7F6E\\u7684\\u8BA1\\u7B97\\u80FD\\u529B\\u8FDB\\u884C\\u8F93\\u51FA\\n  let diffComputer = new DiffComputer(originalLines, modifiedLines, {\\n        shouldComputeCharChanges: false,      // \\u4E0D\\u9700\\u8981\\u5B57\\u7B26\\u7EA7\\u522B\\u7684\\u5DEE\\u5F02\\uFF08\\u884C\\u7EA7\\u522B\\u548C\\u5B57\\u7B26\\u7EA7\\u522B\\uFF09\\n    shouldPostProcessCharChanges: false,  // \\u540E\\u7F6E\\u5904\\u7406\\u5B57\\u7B26\\u5DEE\\u5F02\\n    shouldIgnoreTrimWhitespace: false,    // \\u662F\\u5426\\u5FFD\\u7565\\u9996\\u5C3E\\u7A7A\\u683C\\u5DEE\\u5F02\\n    shouldMakePrettyDiff: true            // \\u8C03\\u6574 diff \\u66F4\\u7B26\\u5408\\u76F4\\u89C9\\n  });\\n  return diffComputer.computeDiff();\\n};\\n\")), mdx(\"p\", null, \"\\u6700\\u540E\\u5F97\\u5230\\u7684\\u7ED3\\u679C\\u4E00\\u4E2A json \\u5BF9\\u8C61\\u63CF\\u8FF0\\u4FEE\\u6539\\u548C\\u65B0\\u589E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"[\\n  {\\n    \\\"originalStartLineNumber\\\": 24,\\n    \\\"originalEndLineNumber\\\": 0,\\n    \\\"modifiedStartLineNumber\\\": 25,\\n    \\\"modifiedEndLineNumber\\\": 25\\n  },\\n  {\\n    \\\"originalStartLineNumber\\\": 31,\\n    \\\"originalEndLineNumber\\\": 31,\\n    \\\"modifiedStartLineNumber\\\": 32,\\n    \\\"modifiedEndLineNumber\\\": 32\\n  },\\n  {\\n    \\\"originalStartLineNumber\\\": 34,\\n    \\\"originalEndLineNumber\\\": 0,\\n    \\\"modifiedStartLineNumber\\\": 36,\\n    \\\"modifiedEndLineNumber\\\": 36\\n  },\\n  {\\n    \\\"originalStartLineNumber\\\": 38,\\n    \\\"originalEndLineNumber\\\": 38,\\n    \\\"modifiedStartLineNumber\\\": 39,\\n    \\\"modifiedEndLineNumber\\\": 0\\n  }\\n]\\n\")), mdx(\"h3\", null, \"2. \\u5C06 diff \\u6570\\u636E\\u89E3\\u6790\\u4E3A decorations\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u83B7\\u53D6\\u7F16\\u8F91\\u5668\\u4E00\\u4E9B\\u56FA\\u5B9A\\u7684\\u5143\\u7D20\\u4F4D\\u7F6E\\nconst OverviewRulerLane = monaco.editor.OverviewRulerLane;\\n\\n// \\u5B9A\\u4E49\\u4FEE\\u6539\\u7C7B\\u578B\\nconst ChangeType = { Modify: 0, Add: 1, Delete: 2 };\\n\\n// decorations \\u7684\\u914D\\u7F6E\\uFF0C\\u5B9A\\u4E49\\u6807\\u8BB0\\u5E94\\u8BE5\\u5728\\u7684\\u4F4D\\u7F6E\\nconst baseOptions = {\\n  isWholeLine: true,\\n  position: OverviewRulerLane.Left + 2,\\n  overviewRuler: {\\n    color: 'RGBA(0, 122, 204, 0.6)',\\n    position: OverviewRulerLane.Left,\\n  }\\n}\\n// \\u4E0D\\u540C\\u7684 decorations \\u6709\\u4E0D\\u540C\\u7684 class name\\uFF0C\\u4EE5\\u4FBF css \\u5B9A\\u4E49\\u6837\\u5F0F\\nconst modifiedOptions = Object.assign({\\n  linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-modified',\\n}, baseOptions);\\nconst addedOptions = Object.assign({\\n  linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-added',\\n}, baseOptions);\\nconst deletedOptions = Object.assign({\\n  linesDecorationsClassName: 'dirty-diff-glyph dirty-diff-deleted',\\n}, baseOptions);\\n\\n// \\u6839\\u636E\\u4E0D\\u540C\\u7684\\u6570\\u636E\\uFF0C\\u80FD\\u89E3\\u6790\\u4E3A\\u4E0D\\u540C\\u7684\\u4FEE\\u6539\\u7C7B\\u578B\\nfunction getChangeType(change) {\\n  if (change.originalEndLineNumber === 0) {           // \\u65B0\\u589E\\u884C\\n    return ChangeType.Add;\\n  } else if (change.modifiedEndLineNumber === 0) {    // \\u5220\\u9664\\u884C\\n    return ChangeType.Delete;\\n  } else {                                            // \\u5176\\u4ED6\\u7684\\u90FD\\u662F\\u4FEE\\u6539\\n    return ChangeType.Modify;\\n  }\\n}\\n// \\u6839\\u636E\\u4E0A\\u9762\\u7684 diffChanges \\u8FDB\\u884C\\u8F6C\\u6362\\nconst generateDecorations = (changes) => {\\n  const decorations = changes.map((change) => {\\n    const changeType = getChangeType(change);\\n    const startLineNumber = change.modifiedStartLineNumber;\\n    const endLineNumber = change.modifiedEndLineNumber || startLineNumber;\\n\\n    // \\u6839\\u636E\\u4E0D\\u540C\\u7684\\u4FEE\\u6539\\u7C7B\\u578B\\uFF0C\\u5B9A\\u4E49\\u5F71\\u54CD\\u7684\\u884C\\u8303\\u56F4\\n    switch (changeType) {\\n      case ChangeType.Add:\\n        return {\\n          range: {\\n            startLineNumber: startLineNumber, startColumn: 1,\\n            endLineNumber: endLineNumber, endColumn: 1\\n          },\\n          options: addedOptions\\n        };\\n      case ChangeType.Delete:\\n        return {\\n          range: {\\n            startLineNumber: startLineNumber, startColumn: 1,\\n            endLineNumber: startLineNumber, endColumn: 1\\n          },\\n          options: deletedOptions\\n        };\\n      case ChangeType.Modify:\\n        return {\\n          range: {\\n            startLineNumber: startLineNumber, startColumn: 1,\\n            endLineNumber: endLineNumber, endColumn: 1\\n          },\\n          options: modifiedOptions\\n        };\\n    }\\n  });\\n  return decorations;\\n}\\n\")), mdx(\"p\", null, \"\\u600E\\u4E48\\u4F7F\\u7528\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u8BA1\\u7B97 diff changes\\nconst changesSave = computeDirtyDiff(originalLines, model);\\n// \\u6839\\u636E changes \\u5B9A\\u4E49\\u88C5\\u9970\\u5668\\nlet decorations = generateDecorations(changesSave);\\n// \\u5C06\\u88C5\\u9970\\u5668\\u66F4\\u65B0\\u5230\\u7F16\\u8F91\\u5668\\u4E2D\\ndecorationsSave = model.deltaDecorations(decorationsSave || [], decorations);\\n\")), mdx(\"p\", null, \"\\u522B\\u5FD8\\u4E86 css\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \".monaco-editor .dirty-diff-glyph {\\n    margin-left: 5px;\\n    cursor: pointer;\\n    z-index: 5;\\n}\\n.monaco-editor .dirty-diff-glyph:before {\\n    position: absolute;\\n    content: \\\"\\\";\\n    height: 100%;\\n    width: 0;\\n    left: -2px;\\n    transition: width 80ms linear,left 80ms linear;\\n}\\n.monaco-editor .margin-view-overlays>div:hover>.dirty-diff-glyph:before {\\n    position: absolute;\\n    content: \\\"\\\";\\n    height: 100%;\\n    width: 9px;\\n    left: -6px;\\n}\\n.monaco-diff-editor .dirty-diff-glyph {\\n    display: none;\\n}\\n\\n/** delete **/\\n\\n.monaco-editor .dirty-diff-deleted:after {\\n    border-left: 4px solid #94151b;\\n    content: \\\"\\\";\\n    position: absolute;\\n    bottom: -4px;\\n    box-sizing: border-box;\\n    width: 4px;\\n    height: 0;\\n    z-index: 9;\\n    border-top: 4px solid transparent;\\n    border-bottom: 4px solid transparent;\\n    transition: border-top-width 80ms linear,border-bottom-width 80ms linear,bottom 80ms linear;\\n    pointer-events: none;\\n}\\n.monaco-editor .dirty-diff-deleted:before {\\n    background: #94151b;\\n    margin-left: 3px;\\n    height: 0;\\n    bottom: 0;\\n    transition: height 80ms linear;\\n}\\n.monaco-editor .margin-view-overlays>div:hover>.dirty-diff-deleted:after {\\n    bottom: 0;\\n    border-top-width: 0;\\n    border-bottom-width: 0;\\n}\\n\\n/* add modify */\\n.monaco-editor .dirty-diff-modified {\\n    border-left: 3px solid #0c7d9d;\\n}\\n.monaco-editor .dirty-diff-added {\\n    border-left: 3px solid #587c0c;\\n}\\n.monaco-editor .dirty-diff-modified:before {\\n    background: #0c7d9d;\\n}\\n.monaco-editor .dirty-diff-added:before {\\n    background: #587c0c;\\n}\\n\\n/* peekview */\\n\\n.ubug-overlay {\\n    border-top: 1px solid #00BCD4;\\n    border-bottom: 1px solid #00BCD4;\\n    display: flex;\\n    flex-direction: column;\\n}\\n.ubug-overlay-name {\\n    font-weight: bold;\\n}\\n.ubug-overlay-title {\\n    background: #3b4448;\\n    color: #fff;\\n    display: flex;\\n    line-height: 20px;\\n    height: 20px;\\n    padding: 0 10px;\\n    justify-content: space-between;\\n    border-bottom: 1px solid #00bcd4;\\n}\\n\\n.ubug-overlay-type-0{border-color: #0c7d9d;}\\n.ubug-overlay-type-0 .ubug-overlay-title{border-bottom-color: #0c7d9d;}\\n\\n.ubug-overlay-type-1{border-color: #587c0c;}\\n.ubug-overlay-type-1 .ubug-overlay-title{border-bottom-color: #587c0c;}\\n\\n.ubug-overlay-type-2{border-color: #94151b;}\\n.ubug-overlay-type-2 .ubug-overlay-title{border-bottom-color: #94151b;}\\n\\n.ubug-overlay-editor {\\n    flex: auto;\\n}\\n.ubug-overlay-btns {\\n    display: flex;\\n}\\n.ubug-overlay-btn {\\n    font-size: 20px;\\n    line-height: 18px;\\n    opacity: .6;\\n    width: 20px;\\n    text-align: center;\\n}\\n.ubug-overlay-btn:hover {\\n    opacity: 1;\\n}\\n\")), mdx(\"h3\", null, \"3. line dirty diff \\u6548\\u679C\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u80FD\\u5F97\\u5230\\u8FD9\\u6837\\u7684\\u6548\\u679C\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"561px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5995ad77444aaff53f6ed86d0046f831/dd457/dirty_diff_4.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"27.7992277992278%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAAA8UlEQVQY05WPy2rDMBBF/Q1dFL8VyXVkyZVsxw9sy110EQLJqlDoshQK/f8vuLXUB7SEQBaHo5kLMyOPcYbn9Aan9BYm9TGvJEmCOE5Wx+59Dd4mZzgUFCctcOh3EJQgDMPvofEfn+N/5hHK8M4jvFZbHBXHvmBgjF4ccvlCQqD4FlXTgAiJu3uFLMvg+7679BxBEDh+6iiKfvFYnqOlKYwu8fQw41hJaKVQliXqukazLtJaQ609a1sPw+CwPSklhBDONvc2qsZbHuJjV+DlccHeTFiWBeM4ou97N7TrOrRti9kYTNNXbm3hnLsfUUqdPwHx+qzxgSPjHAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"能够实现的效果\",\n    \"title\": \"能够实现的效果\",\n    \"src\": \"/static/5995ad77444aaff53f6ed86d0046f831/dd457/dirty_diff_4.png\",\n    \"srcSet\": [\"/static/5995ad77444aaff53f6ed86d0046f831/2c191/dirty_diff_4.png 259w\", \"/static/5995ad77444aaff53f6ed86d0046f831/86b01/dirty_diff_4.png 518w\", \"/static/5995ad77444aaff53f6ed86d0046f831/dd457/dirty_diff_4.png 561w\"],\n    \"sizes\": \"(max-width: 561px) 100vw, 561px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u80FD\\u591F\\u5B9E\\u73B0\\u7684\\u6548\\u679C\"), \"\\n  \")), mdx(\"h3\", null, \"4. peekView\"), mdx(\"p\", null, \"\\u5B8C\\u6210\\u4E0A\\u9762\\u7684\\u6548\\u679C\\u5176\\u5B9E\\u5DF2\\u7ECF\\u80FD\\u591F\\u6709\\u751F\\u4EA7\\u529B\\u7684\\uFF0C\\u4E0D\\u8FC7\\u4E00\\u822C\\u7684 dirtyDiff \\u529F\\u80FD\\u90FD\\u9700\\u8981\\u642D\\u914D\\u70B9\\u51FB\\u67E5\\u770B\\u7684\\u529F\\u80FD\\uFF0C\\u4E5F\\u5C31\\u662F\\u70B9\\u51FB\\u884C\\u9996\\u7684\\u6807\\u8BB0\\uFF0C\\u80FD\\u591F\\u67E5\\u770B\\u5230\\u5177\\u4F53\\u54EA\\u4E9B dirty\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u529F\\u80FD\\u7684\\u5B9E\\u73B0\\u4E5F\\u8C03\\u7814\\u4E86\\u5F88\\u4E45\\uFF0C\\u600E\\u4E48\\u624D\\u80FD\\u5728\\u7F16\\u8F91\\u5668\\u4E2D\\u5D4C\\u5165\\u4E00\\u4E2A diff \\u7F16\\u8F91\\u5668\\u5462\\uFF1F\\u4E00\\u756A\\u641C\\u7D22\\u4E4B\\u540E\\u53D1\\u73B0\\u4E86 OverlayWidget \\u548C ViewZone \\u8FD9\\u4E24\\u4E2A\\u4E1C\\u897F\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"ViewZone \\u662F\\u8D1F\\u8D23\\u5728\\u7F16\\u8F91\\u5668\\u5185\\u90E8\\u884C\\u4E4B\\u95F4\\u5F00\\u542F\\u4E00\\u7247\\u533A\\u57DF\\u7684\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"editor.changeViewZones((changeAccessor) => {\\n  let viewZoneId = changeAccessor.addZone({\\n    afterLineNumber: endLineNum,\\n    suppressMouseDown: true,\\n    heightInLines: lineHeight + 1, // one more for the title\\n    domNode: zoneNode,\\n    onDomNodeTop: top => {\\n      overlayDom.style.top = top + \\\"px\\\";\\n    },\\n    onComputedHeight: height => {\\n      overlayDom.style.height = height + \\\"px\\\";\\n    }\\n  });\\n  // editor.setPosition({ column: 1, lineNumber: endLineNum });\\n  editor.revealLineInCenter(endLineNum);\\n  // this.renderDiffEditorAtDom(editor, endLineNum, overlayDom);\\n  // this.overlays.push({ zone: viewZoneId, editor: editor, overlayWidget, index });\\n});\\n\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"OverlayWidget \\u662F\\u8D1F\\u8D23\\u5728\\u7F16\\u8F91\\u5668\\u4E0A\\u6DFB\\u52A0\\u4E00\\u4E2A dom \\u8282\\u70B9\\u7684\\uFF0C\\u7136\\u540E\\u624B\\u52A8\\u8FFD\\u8E2A zone \\u7684\\u4F4D\\u7F6E\\u548C\\u9AD8\\u5EA6\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"editor.addOverlayWidget({\\n  getId: () => `${path} - ${index}`,\\n  getDomNode: () => document.createElement('div'),\\n  getPosition: () => null\\n});\\n\")))), mdx(\"p\", null, \"\\u4F7F\\u7528\\u8FD9\\u4E24\\u4E2A\\u63A5\\u53E3\\u7684\\u539F\\u56E0\\u662F\\u53EF\\u4EE5\\u5185\\u5D4C\\u5728\\u7F16\\u8F91\\u5668\\u7684\\u6548\\u679C\\uFF0C\\u4E0D\\u4F1A\\u968F\\u7740\\u6EDA\\u52A8\\u70B9\\u51FB\\u7B49\\u53D8\\u66F4\\u3002\"), mdx(\"p\", null, \"\\u5B8C\\u6574\\u7684\\u6548\\u679C\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u7F16\\u8F91\\u5668\\u70B9\\u51FB\\u76D1\\u542C\\uFF0C\\u8FC7\\u6EE4\\u7279\\u5B9A\\u7ED1\\u5B9A\\u7684 editor\\uFF0C\\u76EE\\u6807\\u662F\\u521A\\u624D\\u6DFB\\u52A0\\u7684\\u88C5\\u9970\\u5668\\neditor.onMouseDown((e) => {\\n  if (e.target.type === monaco.editor.MouseTargetType.GUTTER_LINE_DECORATIONS &&\\n    /dirty-diff/.test(e.target.element.className)) {\\n    const path = getPathFromModel(editor.getModel());\\n    const lineNumber = e.target.position.lineNumber;\\n    if (this.updaters[path]) {\\n      // \\u83B7\\u53D6\\u4FEE\\u6539\\u7684\\u4F4D\\u7F6E\\n      const changeIndex = this.updaters[path].getChangeIndex(lineNumber);\\n      // \\u5F00\\u8F9F\\u4E00\\u4E2A\\u533A\\u57DF\\u653E\\u7F6E diff editor\\n      this.renderOverlay(editor, changeIndex);\\n    }\\n  }\\n});\\n\\n// \\u5C06\\u5FEB\\u901F\\u9884\\u89C8\\u7684\\u57FA\\u7840 dom \\u6CE8\\u5165\\u5230 editor \\u4E2D\\nrenderOverlay = (editor: monaco.editor.IStandaloneCodeEditor, ind: number) => {\\n  this.cleanOverlay();\\n\\n  const path = getPathFromModel(editor.getModel());\\n\\n  const { endLineNum, linesNum, changesNum, index, changeType } = this.updaters[path].getChangeInfo(ind);\\n  let lineHeight = linesNum * 2 + 3 * 2; // \\u4FDD\\u8BC1\\u67E5\\u770B diff \\u540E\\u4E0A\\u4E0B\\u8FD8\\u6709\\u4E09\\u884C\\n  lineHeight = lineHeight > 14 ? 14 : (lineHeight < 8 ? 8 : lineHeight);\\n\\n  this.peekViewIndex = { path, ind, changesNum };\\n\\n  // peek View \\u4E0A\\u7684\\u4E00\\u4E9B\\u70B9\\u51FB\\u529F\\u80FD\\n  const onAddCommit: any = null; // () => { console.log('\\u63D0\\u4EA4\\u529F\\u80FD\\u5F85\\u5B9A'); }  // command.executeCommand('Git.Commit', '');\\n  const onCloseCommit = () => { this.cleanOverlay(); }\\n  const onPrevIndex = () => { this.showPrevChange(); }\\n  const onNextIndex = () => { this.showNextChange(); }\\n\\n  // \\u51C6\\u5907\\u4E00\\u4E2A dom \\u8282\\u70B9\\n  let overlayDom = prepareOverlayWidget(index, changesNum, changeType, path, onAddCommit, onPrevIndex, onNextIndex, onCloseCommit);\\n  // \\u4FEE\\u6B63\\u5E76\\u8DDF\\u8E2A\\u5BBD\\u5EA6\\uFF0C\\u4E0D\\u4F1A\\u8D85\\u8FC7 minimap \\u7684\\u4F4D\\u7F6E\\n  fixOverlayWidth(editor.getLayoutInfo(), overlayDom);\\n\\n  // \\u6DFB\\u52A0 overlay widget\\n  let overlayWidget: monaco.editor.IOverlayWidget = {\\n    getId: () => `${path} - ${index}`,\\n    getDomNode: () => overlayDom,\\n    getPosition: () => null\\n  };\\n  editor.addOverlayWidget(overlayWidget);\\n\\n  // \\u6DFB\\u52A0 view zone\\uFF0C\\u8DDF\\u8E2A\\u9AD8\\u5EA6\\u548C\\u4F4D\\u7F6E\\n  let zoneNode = createDivWithClass(null, null, null, { background: '#8effc9' });\\n  editor.changeViewZones((changeAccessor) => {\\n    let viewZoneId = changeAccessor.addZone({\\n      afterLineNumber: endLineNum,\\n      suppressMouseDown: true,\\n      heightInLines: lineHeight + 1, // one more for the title\\n      domNode: zoneNode,\\n      onDomNodeTop: top => {\\n        overlayDom.style.top = top + \\\"px\\\";\\n      },\\n      onComputedHeight: height => {\\n        overlayDom.style.height = height + \\\"px\\\";\\n      }\\n    });\\n    // editor.setPosition({ column: 1, lineNumber: endLineNum });\\n    // \\u8BA9\\u76EE\\u6807\\u884C\\u81EA\\u52A8\\u5230\\u7F16\\u8F91\\u5668\\u4E2D\\u592E\\n    editor.revealLineInCenter(endLineNum);\\n    // \\u5728 overlay \\u7684\\u8282\\u70B9\\u4E0A\\u6DFB\\u52A0 diff editor\\n    this.renderDiffEditorAtDom(editor, endLineNum, overlayDom);\\n    this.overlays.push({ zone: viewZoneId, editor: editor, overlayWidget, index });\\n  });\\n}\\n\")), mdx(\"p\", null, \"\\u81F3\\u6B64\\uFF0C\\u5B8C\\u6210\\u4E86\\u70B9\\u51FB\\u88C5\\u9970\\u5668\\u67E5\\u770B\\u5177\\u4F53\\u5DEE\\u5F02\\u5BF9\\u6BD4\\u7684\\u6548\\u679C\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u7ED3\\u8BBA\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u63D2\\u4EF6\\u7814\\u7A76\\u4E86\\u6BD4\\u8F83\\u591A\\uFF0C\\u4F46\\u662F\\u6700\\u540E\\u53C2\\u52A0\\u4E86\\u817E\\u8BAF\\u65D7\\u4E0B \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Coding\"), \" \\u4E3B\\u529E\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CloudIDE\"), \" \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://studio.qcloud.coding.net/campaign/favorite-plugins/detail\"\n  }, \"\\u63D2\\u4EF6\\u6BD4\\u8D5B\"), \"\\uFF0C\\u8FD9\\u4E2A\\u63D2\\u4EF6\\u5B89\\u88C5\\u91CF\\u975E\\u5E38\\u5927\\uFF0C\\u62FF\\u5230\\u4E86\\u4F18\\u80DC\\u5956\\uFF0C\\u6700\\u540E\\u88AB\\u5B98\\u65B9\\u5185\\u7F6E\\uFF0C\\u8FD8\\u662F\\u5F88\\u503C\\u5F97\\u561A\\u745F\\u7684~~\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"762px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/d4634d854e6eb9eda534113992f6bb22/faaa2/reward.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"68.33976833976834%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsSAAALEgHS3X78AAADXElEQVQ4yz2RW1NbVRiG92+wN7YQIOSwd87ZJDsnIMEUaUbBItPOcFEVeyPW1pnKjVcde+MvcZzxJ+idM53RqaJlwEISQnMkgXDKAXIqPK5sKBfPrLXXfr9vvev9pNJ2h3LpgFQqx85OkdZpl7Nmh9NGW9C53jdqXQ5KQluusr1doHZ8Kv5dai/Xrq6T2s0epeK+TiZTEBSplA/ZqxzpHFRPqO6fUK+d0ay1KZWqZLO7pNI5crmyrunr9/eOOTpsiIatHvV6l0a9Q7Pe0gvfuWuKtVlvc96DXueC9lmPk6OGcNu61vTP3tFrXyD1OrC5+juFTErcuEc+X9FvPT5qcnLcpHZyKlzW9CZnzTY//fwLr9ZTbCWzIqISu8Lx7pXrYmGv7/CccmaN/Js0axsZXv69zqu1LTY3d3gtSKfzJFNZvaglXBxWDqkmMzQO63Tb57qzTuvttUupf9gRLtsHNZr5Ei0Rckdc0n/mefeSi7fo32enoqHIM72RIi0cZrIVkXmJLTHQZCovci0g9TNJioDTG0n+efGSUr6sD6hYqAhX/WGJGK7Crx/VON4/YF1o/3jxJ6u//cq/f63yev0/itkchTdZpPj0hywlbvNpfAp/MMzExCSTfSajxGIxfX//3n2++voRXy5/x4OnP/Lt9894+miFpYcrLC4/48Hj53z+5DlfPPkB6dbAAAGjgaBiZXBoCMPgIMMjIxjE/v2bN7lx4z3sgRjehWXk+CLTC5+x9Pgb4pPTOCOzWIJzWAIfY4t8gje2gGS2WPC7XUIwQSAQwOf3o7kc2GUrNrMJs2EA+0QCdXEF3/xDErNzTH10l/DtO0SCfqIRjbCmEo9FuDubQPKMaaihcbRIFJfqR3Z5ccgKssWKbFVQbTa8fg0tFCE4+QGxO3NEZ2YJTc0gKzZsDjd2hwuH043PpyFZZDN2l4ziNGO1j+qYFCMmeQSjQLaZUN1OXC4nqtdDKBggLAhoPqyyCdluRdXGUP1uAkEVyW41o3mcBFVR4LDiEiK3YtbxCpThQdHMTVQMaDwcZmY8TDgyTigUwumW8YzJjIVVfEGHaGoXGRqFq1ETFqMJo2FIMHy1DjEqGL41gKIoeDweMfEJ7s3Pk0gkiEajmPsZW2XxZAc2RcbldPA/0+7wFcsU8LYAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"比赛优胜\",\n    \"title\": \"比赛优胜\",\n    \"src\": \"/static/d4634d854e6eb9eda534113992f6bb22/faaa2/reward.png\",\n    \"srcSet\": [\"/static/d4634d854e6eb9eda534113992f6bb22/2c191/reward.png 259w\", \"/static/d4634d854e6eb9eda534113992f6bb22/86b01/reward.png 518w\", \"/static/d4634d854e6eb9eda534113992f6bb22/faaa2/reward.png 762w\"],\n    \"sizes\": \"(max-width: 762px) 100vw, 762px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6BD4\\u8D5B\\u4F18\\u80DC\"), \"\\n  \")), mdx(\"h2\", null, \"\\u4E94\\u3001\\u6700\\u540E\\u7684\\u6700\\u540E\"), mdx(\"p\", null, \"\\u5305\\u62EC\\u4E4B\\u524D\\u7684\\u51E0\\u4E2A\\u529F\\u80FD\\uFF1Atextmate\\u3001LSP \\u548C\\u8FD9\\u4E2A DirtyDiff \\u529F\\u80FD\\uFF0C\\u5199\\u6210\\u6587\\u5B57\\u4E4B\\u540E\\u53D1\\u73B0\\u5F88\\u591A\\u5E76\\u4E0D\\u590D\\u6742\\uFF0C\\u6D41\\u7A0B\\u4E5F\\u5F88\\u6E05\\u6670\\uFF0C\\u4F46\\u662F\\u5F53\\u521D\\u786E\\u5B9E\\u82B1\\u4E86\\u5F88\\u591A\\u7684\\u65F6\\u95F4\\u53BB\\u627E\\u5B9E\\u73B0\\u3001\\u8C03\\u8BD5\\u8FD0\\u884C\\uFF0C\\u6700\\u7EC8\\u5F88\\u8270\\u96BE\\u7684\\u624D\\u8FBE\\u6210\\u60F3\\u8981\\u7684\\u6548\\u679C\\u3002\\u6240\\u4EE5\\u4E00\\u4E2A\\u4E0D\\u719F\\u6089\\u7684\\u9886\\u57DF\\u5982\\u679C\\u5B9E\\u73B0\\u67D0\\u4E9B\\u4E1A\\u52A1\\uFF0C\\u77E5\\u9053\\u60F3\\u8981\\u7684\\u6548\\u679C\\u4F46\\u662F\\u771F\\u7684\\u6CA1\\u6709\\u4E00\\u70B9\\u5934\\u7EEA\\uFF0C\\u786E\\u5B9E\\u9700\\u8981\\u82B1\\u8D39\\u5F88\\u591A\\u7684\\u7CBE\\u529B\\u6765\\u8865\\u5145\\u76F8\\u5173\\u7684\\u80FD\\u529B\\uFF0C\\u6700\\u540E\\u624D\\u80FD\\u4E0D\\u8D39\\u529B\\u7684\\u8BF4\\u51FA\\u5176\\u4E2D\\u7684\\u539F\\u7406\\u548C\\u5B9E\\u73B0\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u4E1C\\u897F\\u5982\\u679C\\u4EA4\\u7ED9\\u4E0D\\u719F\\u6089\\u7684\\u4EBA\\u505A\\uFF0C\\u9700\\u8981\\u82B1\\u8D39\\u5F88\\u591A\\u7684\\u65F6\\u95F4\\u8C03\\u7814\\u5176\\u4E2D\\u7684\\u6BCF\\u4E2A\\u6982\\u5FF5\\uFF0C\\u6240\\u4EE5\\u7ECF\\u9A8C\\u786E\\u5B9E\\u662F\\u4E0D\\u53EF\\u66FF\\u4EE3\\u7684\\u3002\\u4E0D\\u8FC7\\u5BF9\\u4E8E\\u6211\\u6765\\u8BF4\\uFF0C\\u627E\\u8D44\\u6599\\u3001\\u770B\\u6E90\\u7801\\u5230\\u6DF1\\u591C\\uFF0C\\u7136\\u540E\\u628A\\u6548\\u679C\\u6210\\u529F\\u5B9E\\u73B0\\u7684\\u6B23\\u559C\\u5F88\\u96BE\\u5FD8\\u8BB0~~\"), mdx(\"p\", null, \"WorkPad WebIDE \\u7684\\u4E00\\u7CFB\\u5217\\u6587\\u7AE0\\u5199\\u4E86\\u8FD9\\u4E9B\\uFF0C\\u6DB5\\u76D6\\u4E86\\u503C\\u5F97\\u8BF4\\u7684\\u90E8\\u5206\\uFF0C\\u7814\\u7A76\\u6BD4\\u8F83\\u591A\\u7684\\u5730\\u65B9\\uFF0C\\u9664\\u6B64\\u4E4B\\u5916\\u8FD8\\u6709\\u5F88\\u591A\\u7EC6\\u679D\\u672B\\u8282\\u3001\\u82B1\\u4E86\\u5F88\\u591A\\u7CBE\\u529B\\u7684\\u5730\\u65B9\\u3001\\u90FD\\u6CA1\\u6709\\u6D89\\u53CA\\uFF0C\\u4E0D\\u662F\\u4E0D\\u503C\\u5F97\\u8BF4\\uFF0C\\u6BD5\\u7ADF\\u4E0D\\u53EF\\u80FD\\u9762\\u9762\\u4FF1\\u5230\\u3002\\u76EE\\u524D\\u5148\\u5199\\u8FD9\\u4E9B\\uFF0C\\u66F4\\u591A\\u7684\\u5185\\u5BB9\\u7B49\\u6709\\u65F6\\u95F4\\u5F52\\u6863\\u4E0B\\u518D\\u5F62\\u6210\\u6587\\u5B57~\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}